Animierte Button

Gehe zu Seite:

Geschlossen

So. 30.10.2011 21:24 Uhr #1

stefan0585 Mitglied

Registriert seit
04.10.2011

Beiträge
81

Beitragswertungen

Hi,

wie auf der HP zu sehen ist, sind dort die Buttons für Steam, Youtube und Co. als animiertes Menü eingebunden.

So nun sollen diese auch auf dem neuen Design

(anzuschauen, indem man rechts unter dem WeWantYou Bild aus dem Drop Down Menü das mar_Xantur auswählt)logischerweise dabei sein.

Nur was muss ich anstellen, damit eben genau diese Buttons mit dem selben Effekt, hier am linken Rand von oben nach unten sind?

Bzw. ist jemand hier der sich damit auskennt und mir das eben zurechtfummeln könnte? Da dies meine Kentnisse bei weitem übersteigt.

Bevor jemand fragt: So wie es aktuell ist, habe ich es netterweise auch gemacht bekommen.

Danke für die Hilfe

betroffene Homepage: rng-clan.de
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 31.10.2011 03:47 Uhr #2

Sunshine Live Mitglied

Registriert seit
03.06.2009

Beiträge
1.029

Beitragswertungen

Naja musst in deiner index.htm schauen und sie dann in deiner aktuellen index.htm einbaeun.

So habe ich es bei mir ..
externer Link

ez-skinz.com/
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 31.10.2011 10:16 Uhr #3

Mikro Mitglied

Code_1 in den head Platzieren muss aber nicht,
aber vor dem Code_2 und nach Code_Info.

Code_Info ist bei dir schon vorhanden muss nicht rein

1	`<script type="text/javascript" src="include/designs/mar_Xantur/jquery.min.js"></script>`

Code_1

<script type="text/javascript">
$(document).ready(function(){
                              
$("#animatemenu a").hover(function(){
$(this).animate({top: '5px'}, 100).animate({top: '10px'}, 200).animate({top: '0px'}, 200);
}, function(){
$(this).animate({top: '15px'}, 200);
});
            
});
</script>

Und das an die Stelle in deiner index wo du es haben willst:
Code_2

<div id="animatemenu" align="right" style="margin-top: -46px;"><a href="http://steamcommunity.com/groups/rheinneckargrizzlys/" target="_blank" title="Follow Us to Steam" style="right:153px;"><img src="uploads/steam.png" border="0"></a><a href="http://www.youtube.com/user/RheinNeckarGrizzly" target="_blank" title="Follow Us to YouTube" style="right:102px;"><img src="uploads/youtube.png" border="0"></a><a href="http://www.facebook.com/rng.clan" target="_blank" title="Follow Us to Facebook" style="right:51px;"><img src="uploads/Facebook1.png" border="0"></a><a href="http://www.twitter.com/#!/RheinNeckarGriz" target="_blank" title="Follow Us to Twitter" style="right:0px;"><img src="uploads/Twitter1.png" border="0"></a></div>

Mehr ist das nicht was du brauchst,alles andere ist schon da.

Zuletzt modifiziert von Mikro am 31.10.2011 - 10:25:20

Wer Rechtschreibfehler findet darf sie behalten!

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 31.10.2011 10:24 Uhr #4

stefan0585 Mitglied

Registriert seit
04.10.2011

Beiträge
81

Beitragswertungen

Jaaaaaa genau so stelle ich mir das vor nur eben auf der linken Seite.

Mhh könnte ich dir meine Index.htm einfach geben? Ich blick da Momentan überhaupt nicht durch verstehe nur Bahnhof

Zuletzt modifiziert von stefan0585 am 31.10.2011 - 10:45:21
0 Mitglieder finden den Beitrag gut.
- zitieren
Mo. 31.10.2011 10:53 Uhr #5

Mikro Mitglied

Registriert seit
05.10.2011

Beiträge
237

Beitragswertungen

Ja dann poste sie doch mal die index

Wer Rechtschreibfehler findet darf sie behalten!
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 31.10.2011 10:58 Uhr #6

stefan0585 Mitglied

So da ist sie:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Codierung by Maretz.eu - Free Ilch Clan und Community Templates -->
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>{TITLE}</title>
<link rel="stylesheet" href="include/designs/mar_Xantur/style.css" type="text/css" title="Xantur" media="screen, projection">
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<script type="text/javascript" src="include/designs/mar_Xantur/flash/js/swfobject/swfobject.js"></script>
<style type="text/css">
{
body { margin: 5% auto; text-align:center;}
#cu3er-container {width:425px; outline:0;}
}
</style>
<script type="text/javascript">
        var flashvars = {};
        flashvars.xml = "include/designs/mar_Xantur/flash/config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("include/designs/mar_Xantur/flash/cu3er.swf", "cu3er-container", "425", "180", "9", "include/designs/mar_Xantur/flash/js/swfobject/expressInstall.swf", flashvars, attributes);
</script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery-color.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/main.js"></script>
<script type="text/javascript">
    var box = 4;
    var chosbox = 1;
    function togglebox (tshow) {
        tshow = isNaN(tshow) ? 1 : tshow;
        if (tshow < 1 || tshow > box) {
            tshow = (chosbox < box) ? chosbox + 1 : 1;
        }
        document.getElementById('boxx_'+chosbox).style.display = 'none';
        document.getElementById('boxx_'+tshow).style.display = '';
        chosbox = tshow;
    }
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/partner/motiongallery.js">
 
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
 
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/jquery.min.js"></script>
<script type="text/javascript">
<!--
jQuery(document).ready(function() {
   $("a#ToogleSidebar1").click().toggle(function() {
       $('#sidebar1').animate({
           width: 'hide',
           opacity: 'hide'
       }, 'slow');
   }, function() {
       $('#sidebar1').animate({
           width: 'show',
           opacity: 'show'
       }, 'fast');
   });
});
-->
</script>
</head>
<body>
       <div id="ts_slid" class="ts_slid" style=" right: -245px; width: 316px; position: fixed; top: 122px; background: url(include/designs/mar_Xantur/images/tsserver.png) repeat scroll 0% 0% transparent; height: 594px; z-index: 999;" >
   <div style="position:absolute;top:9px;left:86px;width:214px;height:576px;overflow:auto; color:#ffffff;"><div id="ts3viewer_973051" style="width:; background-color:;"> </div>
 
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
 
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=973051&text=000000&text_size=12&text_family=1&js=1&text_s_color=f5f7fa&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=f5f7fa&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=f5f7fa&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=f5f7fa&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 973051, 100);
-->
</script>
</div></div>
<div align="center"><div id="full"><a name="anfang" id="anfang"></a>
<div id="header" align="left"><div id="head1" align="left"><APPLET archive="include/designs/mar_Xantur/watereffekt/DuriusAll.jar" WIDTH="970" HEIGHT="164" ALIGN="MIDDLE" CODE="DuriusWaterPic.class">
        <PARAM NAME="cabbase" VALUE="include/designs/mar_Xantur/watereffekt/DuriusWaterPic.cab">
        <PARAM NAME="image" VALUE="include/designs/mar_Xantur/watereffekt/head1.png">
        <PARAM NAME="dim" VALUE="5">
        <PARAM NAME="noise" VALUE="0">
        <PARAM NAME="mouse" VALUE="7">
        <PARAM NAME="timer" VALUE="0">
        <PARAM NAME="target" VALUE="_blank">
        <PARAM NAME="bg" VALUE="666666">
        <PARAM NAME="url" VALUE="http://www.rng-clan.de">
        <PARAM NAME="reg" VALUE="22454732">
    </APPLET></div></div>
<div id="one" align="left">
<div id="panel-left" align="left"><div id="button-box" align="left">
<a href="javascript:void(0);" onclick="togglebox(1);" class="sbutton" title="letzte Newseinträge">LastNews</a><br>
<a href="javascript:void(0);" onclick="togglebox(2);" class="sbutton" title="letzte Forum Posts">LastForum</a><br>
<a href="javascript:void(0);" onclick="togglebox(3);" class="sbutton" title="letzte War Ergebnisse">LastWars</a><br>
<a href="javascript:void(0);" onclick="togglebox(4);" class="sbutton" title="kommende War Termine">NextWars</a></div></div>
<div id="panel-middle" align="left"><div id="infoboxpanel" align="left"><div id="boxx_1"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest News Entries &laquo;</strong><br>{_boxes_lastnews_xantur}</div>
<div id="boxx_2" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest Forum Posts &laquo;</strong><br>{_boxes_lastforum_xantur}</div>
<div id="boxx_3" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Last War Results &laquo;</strong><br>{_boxes_lastwars_xantur}</div>
<div id="boxx_4" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Next War Dates &laquo;</strong><br>{_boxes_nextwars_xantur}</div></div></div></div>
    <div id="panel-right" align="left"><div id="showbox" align="left">{_boxes_showbox}</div></div>
<div id="panel-navigation" align="left"><div id="pageBody">
            <a class="hoverBtn" href="index.php?" title="Home">Home</a>
            <a class="hoverBtn" href="index.php?forum" title="Forum">Forum</a>
            <a class="hoverBtn" href="index.php?omember" title="Mitglieder">Mitglieder</a>
            <a class="hoverBtn" href="index.php?rules" title="Regelwerk">Regeln</a>
            <a class="hoverBtn" href="index.php?contact" title="Contact zu {SITENAME}">Contact</a>
            <a class="hoverBtn" href="index.php?gbook" title="Gästebuch">Gästebuch</a>
            <a class="hoverBtn" href="index.php?joinus" title="Joinus">JoinUs</a>
            <a class="hoverBtn" href="index.php?teams" title="Squads">Squads</a>
            <a class="hoverBtn" href="index.php?Serverseite" title="Server">Server</a></div><div id="mar" align="left"><a href="http://www.maretz.eu" target="_blank" title="Maretz.eu - Digital Art | Free Ilch Clan und Community Templates"><img src="include/designs/mar_Xantur/images/mar.gif" border="0"/></a></div></div>
  <br style="clear: both;" />
  <div id="content-bg">
  
  <div id="left_col">
 
    {_list_menunr1@
            <div id="menu_heading_left" >
<div id="menu_heading_left_font">%1</div>
  </div>
<div id="menuleftmiddle" align="center" valign="top" class="menuone">%2</div>
<div id="menuleftbottom" align="left" valign="bottom" ></div>
    }
 
  </div>
<div id="head_content" align="left"><div id="tophmenu" align="left"><span class="hmenustyle">&raquo;&nbsp;{HMENU}</span></div></div>
<div id="main_col" align="left">
<div id="main_colin">{EXPLODE}</div>
<div id="foot_content" align="left"></div></div>
 
  <div id="right_col"  style="margin-top:-24px">
 
    {_list_menunr2@
            <div id="menu_heading_right" >
<div id="menu_heading_right_font">%1</div>
</div>
<div id="menurightmiddle" align="center" valign="top" ><div class="menutwo">%2</div>
</div>
<div id="menurightbottom" align="right" valign="bottom" ></div>
    }
 
  </div>
 
  <br style="clear: both;" />
<div id="partner" align="left"><div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<!-- Start Partnerpanel -->
<nobr id="trueContainer"><a href="http://www.maretz.eu" target="_blank"><img src="http://www.maretz.eu/banner/maretz103x31banner.jpg" border="0"></a> <a href="http://www.ilch.de" target="_blank"><img src="http://www.ilch.de/images/banner/copy_by_ilch.gif" border="0"></a></nobr></div></div></div>
<!-- Ende Partnerpanel -->
<div id="footer" align="left"><div id="toppage" align="left"><a title="Top Page" href="#anfang"><img src="include/designs/mar_Xantur/images/top_page.png" border="0" alt=""></a></div></div>
</div></div>
<div align="center" style="clear:left; background-color: #0e0e0e; background-position: 0% 0%; background-repeat:repeat-x; background-image:url(include/designs/mar_Xantur/images/bg_dfoot.jpg);"><div id="full">
<div id="two" align="left"></div>
<div id="footimages" align="center"><a href="http://www.battlefield.com/battlefield3" target="_blank"><img src="include/designs/mar_Xantur/footimage/bf3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.callofduty.com/mw3" target="_blank"><img src="include/designs/mar_Xantur/footimage/mw3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.ea.com" target="_blank"><img src="include/designs/mar_Xantur/footimage/ea.png" border="0"/></a></div>
  <br style="clear: both;" />
</div></div>
<script type="text/javascript">
var state = 0;
var wait = false;
  
function changeSlider1()
{
if(state==1){
$('#ts_slid').animate({width: 316 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slid').animate({width: 556 }, "slow", function(){state = 1;}
);
}
  
$('#ts_slid').click(function(){
changeSlider1();
});
      </script>
</body>
</html>
<!-- {__list_hmenupoint@<strong><b>&middot;</b></strong><a %1 class="box" href="%2">%3</a><br>}
{_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
{_list_hmenubegi@<ul>}
{_list_hmenuende@</ul>}
{_list_vmenupoint@<a target="%1" class="menu" href="%2">%3</a>}
{_list_vmenubegi@}
{_list_vmenuende@}//-->

Danke

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 31.10.2011 11:25 Uhr #7

Mikro Mitglied

Test mal ob es geht:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Codierung by Maretz.eu - Free Ilch Clan und Community Templates -->
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>{TITLE}</title>
<link rel="stylesheet" href="include/designs/mar_Xantur/style.css" type="text/css" title="Xantur" media="screen, projection">
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<script type="text/javascript" src="include/designs/mar_Xantur/flash/js/swfobject/swfobject.js"></script>
<style type="text/css">
{
body { margin: 5% auto; text-align:center;}
#cu3er-container {width:425px; outline:0;}
}
 
#animatemenu {
    width:50px;
    height:300px;
    position:absolute;
    top:180px;
    left:-55px;
    z-index:3000;
}
#animatemenu a {
    position:relative;
}
 
</style>
<script type="text/javascript">
        var flashvars = {};
        flashvars.xml = "include/designs/mar_Xantur/flash/config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("include/designs/mar_Xantur/flash/cu3er.swf", "cu3er-container", "425", "180", "9", "include/designs/mar_Xantur/flash/js/swfobject/expressInstall.swf", flashvars, attributes);
</script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery-color.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/main.js"></script>
<script type="text/javascript">
    var box = 4;
    var chosbox = 1;
    function togglebox (tshow) {
        tshow = isNaN(tshow) ? 1 : tshow;
        if (tshow < 1 || tshow > box) {
            tshow = (chosbox < box) ? chosbox + 1 : 1;
        }
        document.getElementById('boxx_'+chosbox).style.display = 'none';
        document.getElementById('boxx_'+tshow).style.display = '';
        chosbox = tshow;
    }
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/partner/motiongallery.js">
  
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
  
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
                              
$("#animatemenu a").hover(function(){
 
$(this).animate({left: '5px'}, 100).animate({left: '10px'}, 200).animate({left: '0px'}, 200);
}, function(){
$(this).animate({left: '15px'}, 200);
});
            
});
</script>
<script type="text/javascript">
<!--
jQuery(document).ready(function() {
   $("a#ToogleSidebar1").click().toggle(function() {
       $('#sidebar1').animate({
           width: 'hide',
           opacity: 'hide'
       }, 'slow');
   }, function() {
       $('#sidebar1').animate({
           width: 'show',
           opacity: 'show'
       }, 'fast');
   });
});
-->
</script>
</head>
<body>
       <div id="ts_slid" class="ts_slid" style=" right: -245px; width: 316px; position: fixed; top: 122px; background: url(include/designs/mar_Xantur/images/tsserver.png) repeat scroll 0% 0% transparent; height: 594px; z-index: 999;" >
   <div style="position:absolute;top:9px;left:86px;width:214px;height:576px;overflow:auto; color:#ffffff;"><div id="ts3viewer_973051" style="width:; background-color:;"> </div>
  
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
  
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=973051&text=000000&text_size=12&text_family=1&js=1&text_s_color=f5f7fa&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=f5f7fa&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=f5f7fa&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=f5f7fa&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 973051, 100);
-->
</script>
</div></div>
<div align="center"><div id="full"><a name="anfang" id="anfang"></a>
<div id="header" style="position:relative" align="left">
<div id="animatemenu" align="right" style="width:60px;">
<a href="http://steamcommunity.com/groups/rheinneckargrizzlys/" target="_blank" title="Follow Us to Steam" style="left:15px;"><img src="uploads/steam.png" border="0"></a>
<a href="http://www.youtube.com/user/RheinNeckarGrizzly" target="_blank" title="Follow Us to YouTube"  style="left:15px;"><img src="uploads/youtube.png" border="0"></a>
<a href="http://www.facebook.com/rng.clan" target="_blank" title="Follow Us to Facebook"  style="left:15px;"><img src="uploads/Facebook1.png" border="0"></a>
<a href="http://www.twitter.com/#!/RheinNeckarGriz" target="_blank" title="Follow Us to Twitter"  style="left:15px;"><img style="margin-right:4px;" src="uploads/Twitter1.png" border="0"></a>
</div>
<div id="head1" align="left">
<APPLET archive="include/designs/mar_Xantur/watereffekt/DuriusAll.jar" WIDTH="970" HEIGHT="164" ALIGN="MIDDLE" CODE="DuriusWaterPic.class">
        <PARAM NAME="cabbase" VALUE="include/designs/mar_Xantur/watereffekt/DuriusWaterPic.cab">
        <PARAM NAME="image" VALUE="include/designs/mar_Xantur/watereffekt/head1.png">
        <PARAM NAME="dim" VALUE="5">
        <PARAM NAME="noise" VALUE="0">
        <PARAM NAME="mouse" VALUE="7">
        <PARAM NAME="timer" VALUE="0">
        <PARAM NAME="target" VALUE="_blank">
        <PARAM NAME="bg" VALUE="666666">
        <PARAM NAME="url" VALUE="http://www.rng-clan.de">
        <PARAM NAME="reg" VALUE="22454732">
    </APPLET></div></div>
<div id="one" align="left">
<div id="panel-left" align="left"><div id="button-box" align="left">
<a href="javascript:void(0);" onclick="togglebox(1);" class="sbutton" title="letzte Newseinträge">LastNews</a><br>
<a href="javascript:void(0);" onclick="togglebox(2);" class="sbutton" title="letzte Forum Posts">LastForum</a><br>
<a href="javascript:void(0);" onclick="togglebox(3);" class="sbutton" title="letzte War Ergebnisse">LastWars</a><br>
<a href="javascript:void(0);" onclick="togglebox(4);" class="sbutton" title="kommende War Termine">NextWars</a></div></div>
<div id="panel-middle" align="left"><div id="infoboxpanel" align="left"><div id="boxx_1"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest News Entries &laquo;</strong><br>{_boxes_lastnews_xantur}</div>
<div id="boxx_2" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest Forum Posts &laquo;</strong><br>{_boxes_lastforum_xantur}</div>
<div id="boxx_3" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Last War Results &laquo;</strong><br>{_boxes_lastwars_xantur}</div>
<div id="boxx_4" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Next War Dates &laquo;</strong><br>{_boxes_nextwars_xantur}</div></div></div></div>
    <div id="panel-right" align="left"><div id="showbox" align="left">{_boxes_showbox}</div></div>
<div id="panel-navigation" align="left"><div id="pageBody">
            <a class="hoverBtn" href="index.php?" title="Home">Home</a>
            <a class="hoverBtn" href="index.php?forum" title="Forum">Forum</a>
            <a class="hoverBtn" href="index.php?omember" title="Mitglieder">Mitglieder</a>
            <a class="hoverBtn" href="index.php?rules" title="Regelwerk">Regeln</a>
            <a class="hoverBtn" href="index.php?contact" title="Contact zu {SITENAME}">Contact</a>
            <a class="hoverBtn" href="index.php?gbook" title="Gästebuch">Gästebuch</a>
            <a class="hoverBtn" href="index.php?joinus" title="Joinus">JoinUs</a>
            <a class="hoverBtn" href="index.php?teams" title="Squads">Squads</a>
            <a class="hoverBtn" href="index.php?Serverseite" title="Server">Server</a></div><div id="mar" align="left"><a href="http://www.maretz.eu" target="_blank" title="Maretz.eu - Digital Art | Free Ilch Clan und Community Templates"><img src="include/designs/mar_Xantur/images/mar.gif" border="0"/></a></div></div>
  <br style="clear: both;" />
  <div id="content-bg">
  
  <div id="left_col">
  
    {_list_menunr1@
            <div id="menu_heading_left" >
<div id="menu_heading_left_font">%1</div>
  </div>
<div id="menuleftmiddle" align="center" valign="top" class="menuone">%2</div>
<div id="menuleftbottom" align="left" valign="bottom" ></div>
    }
  
  </div>
<div id="head_content" align="left"><div id="tophmenu" align="left"><span class="hmenustyle">&raquo;&nbsp;{HMENU}</span></div></div>
<div id="main_col" align="left">
<div id="main_colin">{EXPLODE}</div>
<div id="foot_content" align="left"></div></div>
  
  <div id="right_col"  style="margin-top:-24px">
  
    {_list_menunr2@
            <div id="menu_heading_right" >
<div id="menu_heading_right_font">%1</div>
</div>
<div id="menurightmiddle" align="center" valign="top" ><div class="menutwo">%2</div>
</div>
<div id="menurightbottom" align="right" valign="bottom" ></div>
    }
  
  </div>
  
  <br style="clear: both;" />
<div id="partner" align="left"><div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<!-- Start Partnerpanel -->
<nobr id="trueContainer"><a href="http://www.maretz.eu" target="_blank"><img src="http://www.maretz.eu/banner/maretz103x31banner.jpg" border="0"></a> <a href="http://www.ilch.de" target="_blank"><img src="http://www.ilch.de/images/banner/copy_by_ilch.gif" border="0"></a></nobr></div></div></div>
<!-- Ende Partnerpanel -->
<div id="footer" align="left"><div id="toppage" align="left"><a title="Top Page" href="#anfang"><img src="include/designs/mar_Xantur/images/top_page.png" border="0" alt=""></a></div></div>
</div></div>
<div align="center" style="clear:left; background-color: #0e0e0e; background-position: 0% 0%; background-repeat:repeat-x; background-image:url(include/designs/mar_Xantur/images/bg_dfoot.jpg);"><div id="full">
<div id="two" align="left"></div>
<div id="footimages" align="center"><a href="http://www.battlefield.com/battlefield3" target="_blank"><img src="include/designs/mar_Xantur/footimage/bf3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.callofduty.com/mw3" target="_blank"><img src="include/designs/mar_Xantur/footimage/mw3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.ea.com" target="_blank"><img src="include/designs/mar_Xantur/footimage/ea.png" border="0"/></a></div>
  <br style="clear: both;" />
</div></div>
<script type="text/javascript">
var state = 0;
var wait = false;
  
function changeSlider1()
{
if(state==1){
$('#ts_slid').animate({width: 316 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slid').animate({width: 556 }, "slow", function(){state = 1;}
);
}
  
$('#ts_slid').click(function(){
changeSlider1();
});
      </script>
</body>
</html>
<!-- {__list_hmenupoint@<strong><b>&middot;</b></strong><a %1 class="box" href="%2">%3</a><br>}
{_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
{_list_hmenubegi@<ul>}
{_list_hmenuende@</ul>}
{_list_vmenupoint@<a target="%1" class="menu" href="%2">%3</a>}
{_list_vmenubegi@}
{_list_vmenuende@}//-->

Wer Rechtschreibfehler findet darf sie behalten!

0 Mitglieder finden den Beitrag gut.

zitieren

Mo. 31.10.2011 11:28 Uhr #8

stefan0585 Mitglied

Registriert seit
04.10.2011

Beiträge
81

Beitragswertungen

Ja coole Sache danke

Und wenn ich das dann irgendwann mal am Bildchirm rand haben möchte, was muss ich dann machen? Oder sollte ich das lieber nicht machen, wegen den Unterschiedlichen Browsern und Bildchirmgrößen (wegen Darstellungsfehlern)

DANKE
0 Mitglieder finden den Beitrag gut.
- zitieren

Mo. 31.10.2011 11:53 Uhr #9

Mikro Mitglied

Tauche die nochmal bitte aus gegen die, im IE und Chrome gab es Darstellungsfehler.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Codierung by Maretz.eu - Free Ilch Clan und Community Templates -->
<head>
<meta http-equiv="content-type" content="text/html;charset=ISO-8859-1" />
<title>{TITLE}</title>
<link rel="stylesheet" href="include/designs/mar_Xantur/style.css" type="text/css" title="Xantur" media="screen, projection">
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<script type="text/javascript" src="include/designs/mar_Xantur/flash/js/swfobject/swfobject.js"></script>
<style type="text/css">
{
body { margin: 5% auto; text-align:center;}
#cu3er-container {width:425px; outline:0;}
}
 
#animatemenu {
    width:40px;
    height:300px;
    position:absolute;
    top:180px;
    left:-55px;
    z-index:3000;
}
#animatemenu a {
    position:relative;
    padding:10px;
    margin-bottom:20px;
}
 
</style>
<script type="text/javascript">
        var flashvars = {};
        flashvars.xml = "include/designs/mar_Xantur/flash/config.xml";
        flashvars.font = "font.swf";
        var attributes = {};
        attributes.wmode = "transparent";
        attributes.id = "slider";
        swfobject.embedSWF("include/designs/mar_Xantur/flash/cu3er.swf", "cu3er-container", "425", "180", "9", "include/designs/mar_Xantur/flash/js/swfobject/expressInstall.swf", flashvars, attributes);
</script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/jquery-color.js"></script>
    <script type="text/javascript" src="include/designs/mar_Xantur/menu/main.js"></script>
<script type="text/javascript">
    var box = 4;
    var chosbox = 1;
    function togglebox (tshow) {
        tshow = isNaN(tshow) ? 1 : tshow;
        if (tshow < 1 || tshow > box) {
            tshow = (chosbox < box) ? chosbox + 1 : 1;
        }
        document.getElementById('boxx_'+chosbox).style.display = 'none';
        document.getElementById('boxx_'+tshow).style.display = '';
        chosbox = tshow;
    }
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/partner/motiongallery.js">
  
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
  
</script>
<script type="text/javascript" src="include/designs/mar_Xantur/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
                              
$("#animatemenu a").hover(function(){
 
$(this).animate({left: '5px'}, 100).animate({left: '10px'}, 200).animate({left: '0px'}, 200);
}, function(){
$(this).animate({left: '15px'}, 200);
});
            
});
</script>
<script type="text/javascript">
<!--
jQuery(document).ready(function() {
   $("a#ToogleSidebar1").click().toggle(function() {
       $('#sidebar1').animate({
           width: 'hide',
           opacity: 'hide'
       }, 'slow');
   }, function() {
       $('#sidebar1').animate({
           width: 'show',
           opacity: 'show'
       }, 'fast');
   });
});
-->
</script>
</head>
<body>
       <div id="ts_slid" class="ts_slid" style=" right: -245px; width: 316px; position: fixed; top: 122px; background: url(include/designs/mar_Xantur/images/tsserver.png) repeat scroll 0% 0% transparent; height: 594px; z-index: 999;" >
   <div style="position:absolute;top:9px;left:86px;width:214px;height:576px;overflow:auto; color:#ffffff;"><div id="ts3viewer_973051" style="width:; background-color:;"> </div>
  
<script type="text/javascript" src="http://static.tsviewer.com/short_expire/js/ts3viewer_loader.js"></script>
  
<script type="text/javascript">
<!--
var ts3v_url_1 = "http://www.tsviewer.com/ts3viewer.php?ID=973051&text=000000&text_size=12&text_family=1&js=1&text_s_color=f5f7fa&text_s_weight=bold&text_s_style=normal&text_s_variant=normal&text_s_decoration=none&text_s_color_h=525284&text_s_weight_h=bold&text_s_style_h=normal&text_s_variant_h=normal&text_s_decoration_h=underline&text_i_color=f5f7fa&text_i_weight=normal&text_i_style=normal&text_i_variant=normal&text_i_decoration=none&text_i_color_h=525284&text_i_weight_h=normal&text_i_style_h=normal&text_i_variant_h=normal&text_i_decoration_h=underline&text_c_color=f5f7fa&text_c_weight=normal&text_c_style=normal&text_c_variant=normal&text_c_decoration=none&text_c_color_h=525284&text_c_weight_h=normal&text_c_style_h=normal&text_c_variant_h=normal&text_c_decoration_h=underline&text_u_color=f5f7fa&text_u_weight=bold&text_u_style=normal&text_u_variant=normal&text_u_decoration=none&text_u_color_h=525284&text_u_weight_h=bold&text_u_style_h=normal&text_u_variant_h=normal&text_u_decoration_h=none";
ts3v_display.init(ts3v_url_1, 973051, 100);
-->
</script>
</div></div>
<div align="center"><div id="full"><a name="anfang" id="anfang"></a>
<div id="header" style="position:relative" align="left">
<div id="animatemenu" align="right" style="width:60px;">
<a href="http://steamcommunity.com/groups/rheinneckargrizzlys/" target="_blank" title="Follow Us to Steam" style="left:15px;"><img style="margin:3px;"  src="uploads/steam.png" border="0"></a>
<a href="http://www.youtube.com/user/RheinNeckarGrizzly" target="_blank" title="Follow Us to YouTube"  style="left:15px;"><img  style="margin:3px;"  src="uploads/youtube.png" border="0"></a>
<a href="http://www.facebook.com/rng.clan" target="_blank" title="Follow Us to Facebook"  style="left:15px;"><img  style="margin:3px;"  src="uploads/Facebook1.png" border="0"></a>
<a href="http://www.twitter.com/#!/RheinNeckarGriz" target="_blank" title="Follow Us to Twitter"  style="left:15px;"><img  style="margin:3px;" src="uploads/Twitter1.png" border="0"></a>
</div>
<div id="head1" align="left">
<APPLET archive="include/designs/mar_Xantur/watereffekt/DuriusAll.jar" WIDTH="970" HEIGHT="164" ALIGN="MIDDLE" CODE="DuriusWaterPic.class">
        <PARAM NAME="cabbase" VALUE="include/designs/mar_Xantur/watereffekt/DuriusWaterPic.cab">
        <PARAM NAME="image" VALUE="include/designs/mar_Xantur/watereffekt/head1.png">
        <PARAM NAME="dim" VALUE="5">
        <PARAM NAME="noise" VALUE="0">
        <PARAM NAME="mouse" VALUE="7">
        <PARAM NAME="timer" VALUE="0">
        <PARAM NAME="target" VALUE="_blank">
        <PARAM NAME="bg" VALUE="666666">
        <PARAM NAME="url" VALUE="http://www.rng-clan.de">
        <PARAM NAME="reg" VALUE="22454732">
    </APPLET></div></div>
<div id="one" align="left">
<div id="panel-left" align="left"><div id="button-box" align="left">
<a href="javascript:void(0);" onclick="togglebox(1);" class="sbutton" title="letzte Newseinträge">LastNews</a><br>
<a href="javascript:void(0);" onclick="togglebox(2);" class="sbutton" title="letzte Forum Posts">LastForum</a><br>
<a href="javascript:void(0);" onclick="togglebox(3);" class="sbutton" title="letzte War Ergebnisse">LastWars</a><br>
<a href="javascript:void(0);" onclick="togglebox(4);" class="sbutton" title="kommende War Termine">NextWars</a></div></div>
<div id="panel-middle" align="left"><div id="infoboxpanel" align="left"><div id="boxx_1"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest News Entries &laquo;</strong><br>{_boxes_lastnews_xantur}</div>
<div id="boxx_2" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Latest Forum Posts &laquo;</strong><br>{_boxes_lastforum_xantur}</div>
<div id="boxx_3" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Last War Results &laquo;</strong><br>{_boxes_lastwars_xantur}</div>
<div id="boxx_4" style="display:none"><strong style="float:right; margin-right:5px;color:#7A7A7A; font-size:10px;font-family:Verdana,Arial;font-weight:bold;text-shadow: 2px 2px 0 #000000;">Next War Dates &laquo;</strong><br>{_boxes_nextwars_xantur}</div></div></div></div>
    <div id="panel-right" align="left"><div id="showbox" align="left">{_boxes_showbox}</div></div>
<div id="panel-navigation" align="left"><div id="pageBody">
            <a class="hoverBtn" href="index.php?" title="Home">Home</a>
            <a class="hoverBtn" href="index.php?forum" title="Forum">Forum</a>
            <a class="hoverBtn" href="index.php?omember" title="Mitglieder">Mitglieder</a>
            <a class="hoverBtn" href="index.php?rules" title="Regelwerk">Regeln</a>
            <a class="hoverBtn" href="index.php?contact" title="Contact zu {SITENAME}">Contact</a>
            <a class="hoverBtn" href="index.php?gbook" title="Gästebuch">Gästebuch</a>
            <a class="hoverBtn" href="index.php?joinus" title="Joinus">JoinUs</a>
            <a class="hoverBtn" href="index.php?teams" title="Squads">Squads</a>
            <a class="hoverBtn" href="index.php?Serverseite" title="Server">Server</a></div><div id="mar" align="left"><a href="http://www.maretz.eu" target="_blank" title="Maretz.eu - Digital Art | Free Ilch Clan und Community Templates"><img src="include/designs/mar_Xantur/images/mar.gif" border="0"/></a></div></div>
  <br style="clear: both;" />
  <div id="content-bg">
  
  <div id="left_col">
  
    {_list_menunr1@
            <div id="menu_heading_left" >
<div id="menu_heading_left_font">%1</div>
  </div>
<div id="menuleftmiddle" align="center" valign="top" class="menuone">%2</div>
<div id="menuleftbottom" align="left" valign="bottom" ></div>
    }
  
  </div>
<div id="head_content" align="left"><div id="tophmenu" align="left"><span class="hmenustyle">&raquo;&nbsp;{HMENU}</span></div></div>
<div id="main_col" align="left">
<div id="main_colin">{EXPLODE}</div>
<div id="foot_content" align="left"></div></div>
  
  <div id="right_col"  style="margin-top:-24px">
  
    {_list_menunr2@
            <div id="menu_heading_right" >
<div id="menu_heading_right_font">%1</div>
</div>
<div id="menurightmiddle" align="center" valign="top" ><div class="menutwo">%2</div>
</div>
<div id="menurightbottom" align="right" valign="bottom" ></div>
    }
  
  </div>
  
  <br style="clear: both;" />
<div id="partner" align="left"><div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<!-- Start Partnerpanel -->
<nobr id="trueContainer"><a href="http://www.maretz.eu" target="_blank"><img src="http://www.maretz.eu/banner/maretz103x31banner.jpg" border="0"></a> <a href="http://www.ilch.de" target="_blank"><img src="http://www.ilch.de/images/banner/copy_by_ilch.gif" border="0"></a></nobr></div></div></div>
<!-- Ende Partnerpanel -->
<div id="footer" align="left"><div id="toppage" align="left"><a title="Top Page" href="#anfang"><img src="include/designs/mar_Xantur/images/top_page.png" border="0" alt=""></a></div></div>
</div></div>
<div align="center" style="clear:left; background-color: #0e0e0e; background-position: 0% 0%; background-repeat:repeat-x; background-image:url(include/designs/mar_Xantur/images/bg_dfoot.jpg);"><div id="full">
<div id="two" align="left"></div>
<div id="footimages" align="center"><a href="http://www.battlefield.com/battlefield3" target="_blank"><img src="include/designs/mar_Xantur/footimage/bf3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.callofduty.com/mw3" target="_blank"><img src="include/designs/mar_Xantur/footimage/mw3.png" border="0"/></a>&nbsp;&nbsp;&nbsp;<a href="http://www.ea.com" target="_blank"><img src="include/designs/mar_Xantur/footimage/ea.png" border="0"/></a></div>
  <br style="clear: both;" />
</div></div>
<script type="text/javascript">
var state = 0;
var wait = false;
  
function changeSlider1()
{
if(state==1){
$('#ts_slid').animate({width: 316 }, "slow", function(){state = 0;}
);
}
else
$('#ts_slid').animate({width: 556 }, "slow", function(){state = 1;}
);
}
  
$('#ts_slid').click(function(){
changeSlider1();
});
      </script>
</body>
</html>
<!-- {__list_hmenupoint@<strong><b>&middot;</b></strong><a %1 class="box" href="%2">%3</a><br>}
{_list_hmenupoint@<li><a target="%1" class="box" href="%2">%3</a>|</li>|<br />|</ul></li>}
{_list_hmenubegi@<ul>}
{_list_hmenuende@</ul>}
{_list_vmenupoint@<a target="%1" class="menu" href="%2">%3</a>}
{_list_vmenubegi@}
{_list_vmenuende@}//-->

Ich würde es so lassen hat man es gleich im Blick bei einem großen Monitor geht es dann unter.

Wer Rechtschreibfehler findet darf sie behalten!

1 Mitglieder finden den Beitrag gut.

zitieren

Mo. 31.10.2011 12:24 Uhr #10

stefan0585 Mitglied

Registriert seit
04.10.2011

Beiträge
81

Beitragswertungen

Okay vielen Dank!!!!

Ich hatte vorher keine Fehler (Nutze selber Chrome) Aber vielen Danke dafür!!
0 Mitglieder finden den Beitrag gut.
- zitieren

Beitrag zur Merkliste hinzufügen

ilch Forum » Allgemein » HTML, PHP, SQL,... » Animierte Button