nicht angemeldet
Bildwechsel
Hi ich hab ein Menu bei dem Sich bei "onmousover" das Bild wechselt. Danach kommt noch ein seidliches Menu bei dem der selbe Effekt statt findet. Habe dazu das übliche mit "highlight" (wie es hier auch bei selfhtml beschrieben ist) verwendet. Dabei werden ja die Bilder vom Javascript gezählt. Wenn man sich nun aber einloggt, verändert sich das erste menu -> es werden mehr Links. Danach stimmt die Nummerrierung der Bilder natürlich nichtmehr. Gibt es da noch ne andere Methode? Will möglichst keine Frames verwenden.
Gruß
Alex
-
Tag Alex.
[Problembeschreibung]
Kann man sich das Ergebnis deiner Mühen Online anschauen? Dann poste doch bitte den URL.
Siechfred
--
»Sie kochten heimlich mit Wasser und tranken öffentlich Wein.«-
Nein kann man leider nicht ansehen. Ich poste mal den Quellcode. Ist aber noch nicht fertig @ Fehler usw :)
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html lang='en' xml:lang='en' xmlns='http://www.w3.org/1999/xhtml'> <head> <title>AlexFechner.de</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="http://jigsaw.w3.org/css-validator/" rel="validator" /> <style type="text/css"> body { margin:0px; padding:0px; background-image:url(images/bg.gif); color:black; font-family:arial; font-size:8pt; } div { margin:0px; padding:0px; float:left; } .div_menu { height:23px; padding-right:10px; float:left; } .div_menu2 { padding-left:9px; padding-top:60px; height:23px; float:left; }
a:link { color:#575752; text-decoration:none; font-family:arial; font-size:8pt; font-weight:bolder; } a:visited { color:#575752; text-decoration:none; font-family:arial; font-size:8pt; font-weight:bolder; } a:active { color:#575752; text-decoration:none; font-family:arial; font-size:8pt; font-weight:bolder; } a:hover { color:#575752; text-decoration:none; font-family:arial; font-size:8pt; font-weight:bolder; } </style>
<script language="JavaScript"> <!-- Normal1 = new Image(); Normal1.src = "images/link/startseite.gif"; Highlight1 = new Image(); Highlight1.src = "images/link/startseite2.gif";
Normal2 = new Image(); Normal2.src = "images/link/einloggen.gif"; Highlight2 = new Image(); Highlight2.src = "images/link/einloggen2.gif";
Normal3 = new Image(); Normal3.src = "images/link/registrieren.gif"; Highlight3 = new Image(); Highlight3.src = "images/link/registrieren2.gif";
Normal4 = new Image(); Normal4.src = "images/link/passwort-vergessen.gif"; Highlight4 = new Image(); Highlight4.src = "images/link/passwort-vergessen2.gif";
Normal5 = new Image(); Normal5.src = "images/link/ll.gif"; Highlight5 = new Image(); Highlight5.src = "images/link/ll2.gif";
function Bildwechsel(Bildnr,Bildobjekt) { window.document.images[Bildnr].src = Bildobjekt.src; } //--> </script> </head> <body> <table cellSpacing="0" cellPadding="0" style="width:740px; border-left-style:solid; border-right-style:solid; border-color:#999966; border-width:2px;" align="center"> <tr> <td colspan="3" style="background-image:url(images/top1.gif); height:26px;"></td> </tr> <tr> <td colspan="3" style="background-color:#D1D19C;"> <table cellSpacing="0" cellPadding="0" style="width:100%"> <tr valign="bottom"> <td style="width:164px;"> <div style="height:35px; padding:1px; padding-left:3px;"> <div><img src="images/header.gif" alt="AlexFechner.de" /></div> </div> </td> <td>
<table cellSpacing="0" cellPadding="0" align="right"><tr><td> <div class="div_menu"><a href="" onMouseOver="Bildwechsel(1,Highlight1)" onMouseOut="Bildwechsel(1,Normal1)"> <img src="images/link/startseite.gif" alt="Startseite" border="0" /></a></div>
<div class="div_menu"><a href="" onMouseOver="Bildwechsel(2,Highlight2)" onMouseOut="Bildwechsel(2,Normal2)"> <img src="images/link/einloggen.gif" alt="Einloggen" border="0" /></a></div>
<div class="div_menu"><a href="" onMouseOver="Bildwechsel(3,Highlight3)" onMouseOut="Bildwechsel(3,Normal3)"> <img src="images/link/registrieren.gif" alt="Registrieren" border="0" /></a></div>
<div class="div_menu"><a href="" onMouseOver="Bildwechsel(4,Highlight4)" onMouseOut="Bildwechsel(4,Normal4)"> <img src="images/link/passwort-vergessen.gif" alt="Passwort vergessen?" border="0" /></a></div> </td></tr></table>
</td> </tr> </table>
</td> </tr> <tr> <td colspan="3" style="background-image:url(images/top2.gif); height:73px;"></td> </tr> <tr valign="top"> <td style="width:220px; background-image:url(images/menubg.gif); height:127px;"> <div style="width:220px; height:227px; background-image:url(images/menu.gif);"> <div class="div_menu2"> <a href="" onMouseOver="Bildwechsel(5,Highlight5)" onMouseOut="Bildwechsel(5,Normal5)"> <img src="images/link/ll.gif" alt="test" border="0" /> Schildkröte</a> - Alles über meine Gelbwangen-Florida-Schmuckschildkröte.<br />
<a href="" onMouseOver="Bildwechsel(6,Highlight5)" onMouseOut="Bildwechsel(6,Normal5)"> <img src="images/link/ll.gif" alt="test" border="0" /> Verweise</a> - Seiten die ich auf jeden Fall mehr oder weniger oft Besuche.<br />
<a href="" onMouseOver="Bildwechsel(7,Highlight5)" onMouseOut="Bildwechsel(7,Normal5)"> <img src="images/link/ll.gif" alt="test" border="0" /> Games</a> - Spiele die man unbedingt gespielt haben sollte, weil ich sie auch gespielt habe.<br />
</div> </div> </td> <td style="width:468px; background-image:url(images/bg.gif); height:127px;"></td> <td style="width:52px; background-image:url(images/vsmenubg.gif); height:127px;"> <div style="width:52px; height:227px; background-image:url(images/vsmenu.gif);"> </div> </td> </tr> <tr> <td colspan="3" style="background-image:url(images/bottom.gif); height:71px;"></td> </tr> </table> </body> </html>
Das obere Menu würde sich dann verändern, womit sich die Anzahl der Bilder ja auch verändert.
Gruß und Danke Alex
-
Hi Alex,
probier's mal so. Müsste eigentlich laufen. Wichtig ist, dass jedes Bild einen eigenen Namen bekommt und der Bildwechsel über den jeweiligen Namen dann aufgerufen wird. Kannst Dir eigentlich auch auf den meisten Webseiten anschauen, wie die das gelöst haben.
<script language="JavaScript">
<!--
function wechsel(Name,Image,No)
{
document[Name].src=eval(Image+No+".src")
}startseitenbild0 = new Image();
startseitenbild0.src = "images/link/startseite.gif";
startseitenbild1 = new Image();
startseitenbild1.src = "images/link/startseite2.gif";
</script><div class="div_menu"><a href=""
onMouseOver="wechsel('startseitenbild','startseitenbild',1)"
onMouseOut="wechsel('startseitenbild','startseitenbild',0)">
<img src="images/link/startseite.gif" name="startseitenbild" alt="Startseite" border="0" /></a></div>Gruss, Robin
-
Hi,
Kannst Dir eigentlich auch auf den meisten Webseiten anschauen, wie die das gelöst haben.
Sag bitte, daß die meisten Websites es *nicht* so gelöst haben, wie von Dir beschrieben! =;-o
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo,
Kannst Dir eigentlich auch auf den meisten Webseiten anschauen, wie die das gelöst haben.
Sag bitte, daß die meisten Websites es *nicht* so gelöst haben, wie von Dir beschrieben! =;-o
Da hast Du recht, den Code verwende sogar ich nur auf einer einzigen Webseite. Normal lasse ich das gemütlich von Dreamweaver generieren:
<head>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}function MM_findObj(n, d) { //v3.0
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head><body onLoad="MM_preloadImages('images/link/startseite2.gif')">
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('startseite','','images/link/startseite2.gif.gif',1)"><img src="images/link/startseite.gif.gif" width="205" height="35" border="0" name="startseite"></a>
</body>Hat den Vorteil, dass man die Bildwechsel nicht nochmal im <head> explizit angeben muss.
Gruss, Robin
-
Hi,
Da hast Du recht, den Code verwende sogar ich nur auf einer einzigen Webseite. Normal lasse ich das gemütlich von Dreamweaver generieren:
Das ist ja beinahe noch schlimmer! =:-o
Hat den Vorteil, dass man die Bildwechsel nicht nochmal im <head> explizit angeben muss.
Warum sollte man das auch tun?
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Das ist ja beinahe noch schlimmer! =:-o
Guck mal:
<a href="#" onmouseover="document.guckmal.src='guckmal2.gif'" onmouseout="document.guckmal.src='guckmal1.gif'">
<img src="guckmal1.gif" name="guckmal" border="0"></a>Du scheinst mir ein Perfektionist zu sein. Naja umso besser, so lern ich mal "schönes" Programmieren... ;-)
Gruss, Robin
-
Hi,
Du scheinst mir ein Perfektionist zu sein.
Das sagt man mir mitunter nach. =;-)
<a href="#" onmouseover="document.guckmal.src='guckmal2.gif'" onmouseout="document.guckmal.src='guckmal1.gif'">
Wow, nicht schlecht. :-) Vergleichsweise. ;-)
Sinnvoller ist es aber, das ganze in eine Funktion auszulagern - schon wg. der "Funktionalitätsüberprüfung" (AKA: Kann der Browser das überhaupt):
function switch(img,url) { if(document.images) { document.images[img].src=url; } }
Also:
<a href="#" onmouseover="switch('guckmal','guckmal2.gif');" onmouseout="switch('guckmal','guckmal1.gif');">
<img src="guckmal1.gif" name="guckmal" border="0"></a>
Das kann man aber fast so lassen. Allerdings fehlt ALT. Und da ALT bei manchen Browsern auch noch dummerweise für andere Dinge herhalten muß, schadet ggf. auch TITLE nicht (und wenn das Attribut mit leerem Inhalt versehen wird.
Auch WIDTH & HEIGHT sollte man durchaus verwenden, insbesondere mit Blick auf ältere Netscapes.
Naja umso besser, so lern ich mal "schönes" Programmieren... ;-)
Wobei das mitunter relativ ist. ;-)
Ich persönlich verwende (die allerdings leistungsfähigere und im "Normalfall" überdimensionierte Routine) ImgSwitch, die dafür natürlich in eine externe Scriptdatei ausgelagert werden sollte.
Und da im obigen Beispiel noch Redundanz ist, spare ich ggf. auch noch beim Namen. Dazu einfach drei Mini-Funktionen flip(), flop() & flup(), die davon ausgehen, daß zum einen Dateiname und Name des IMGs, zum anderen die verwendeten Dateiextensionen identisch sind, und dann noch zum Dateinamen eine Nr. von 1-3 (oder 0-2) hinzufügen:
function flip(name) { switch(name,name+"2.gif"]); } }
function flop(name) { switch(name,name+"1.gif"]); } }
function flup(name) { switch(name,name+"0.gif"]); } }Dann hätten wir:
<a href="#" onmouseover="flip('guckmal');" onmouseout="flop('guckmal');" onmousedown="flup('guckmal');">
für einen dreistufigen Wechsel.
Und cachen geht ja auch easy:
<script type="text/javascript" language="JavaScript1.1"><!--
if(document.images) { cache=new Array(); i=-1;
i++; cache[i]=new Image(); cache[i].src="guckmal0.gif";
i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
}
//--></script>Aber: Alles ist relativ ...
Und: Viele Wege führen nach Rom ...Nur: Übersichtlicher (und sauberer) als das andere Gedöns, ist es IMHO allemal. ;-)
Gruß, Cybaer
PS: Eigentlich muß man jetzt nur noch verhindern, daß es zu Fehlern kommt, falls das externe Script nicht geladen wurde. Aber das ist ein anderes Thema ... ;-)
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Holla
function switch(img,url) { if(document.images) { document.images[img].src=url; } }
Macht Sinn,ja. Habe aber darauf verzichtet, weil die Zahl der "unfähigen" Browser doch verschwindend gering ist (oder täusche ich mich? Allerdings werde ich es trotzdem zur Sicherheit verwenden.
<img src="guckmal1.gif" name="guckmal" border="0"></a>
Das kann man aber fast so lassen. Allerdings fehlt ALT. Und da ALT bei manchen Browsern auch noch dummerweise für andere Dinge herhalten muß, schadet ggf. auch TITLE nicht (und wenn das Attribut mit leerem Inhalt versehen wird.
Auch WIDTH & HEIGHT sollte man durchaus verwenden, insbesondere mit Blick auf ältere Netscapes.
Das habe ich jetzt nur der Übersichtlichkeit wegen weggelassen. Ausser TITLE kommen bei mir überall die ganzen Attribute vor.
function flip(name) { switch(name,name+"2.gif"]); } }
function flop(name) { switch(name,name+"1.gif"]); } }
function flup(name) { switch(name,name+"0.gif"]); } }Sind das nicht zu viele Klammern?
<a href="#" onmouseover="flip('guckmal');" onmouseout="flop('guckmal');" onmousedown="flup('guckmal');">
<script type="text/javascript" language="JavaScript1.1"><!--
if(document.images) { cache=new Array(); i=-1;
i++; cache[i]=new Image(); cache[i].src="guckmal0.gif";
i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
}
//--></script>Boah, die Sachen gefallen mir ;-)
<script type="text/javascript" language="JavaScript1.1"><!--
if(document.images) {
function switch(img,url) { document.images[img].src=url; }
function flip(name) { switch(name,name+"1.gif"]); }
function flop(name) { switch(name,name+"0.gif"]); }
function flup(name) { switch(name,name+"2.gif"]); }{ cache=new Array(); i=-1;
i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
i++; cache[i]=new Image(); cache[i].src="guckmal2.gif";
}
}
//--></script><a href="#" onmouseover="flip('guckmal');" onmouseout="flop('guckmal');" onmousedown="flup('guckmal');">
<img src="guckmal0.gif" name="guckmal" ... >Das reicht mir doch eigentlich völlig so, oder?
<script ... language="JavaScript1.1">: Versteht der Browser kein JS 1.1, kommts dann bei onmouseover etc. zum Fehler oder überspringt er das JS einfach? Ansonsten wäre doch das möglich???<script type="text/javascript" language="JavaScript"><!--
if(document.images) {
function switch(img,url) { document.images[img].src=url; }
function flip(name) { switch(name,name+"1.gif"]); }
function flop(name) { switch(name,name+"0.gif"]); }
function flup(name) { switch(name,name+"2.gif"]); }{ cache=new Array(); i=-1;
i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
i++; cache[i]=new Image(); cache[i].src="guckmal2.gif";
}
}else {
function flip() //Dummy
function flop() //Dummy
function flup() //Dummy
}
//--></script>Robin
-
Hi,
Habe aber darauf verzichtet, weil die Zahl der "unfähigen" Browser doch verschwindend gering ist (oder täusche ich mich?
Nein (jedenfalls mittlerweile nicht mehr). Aber es gibt nicht nur alte Browser, sondern auch neuere Text-PDA-Browser mit JavaScript (1.3). Aber keine Ahnung, wie die reagieren (nur Testberichte gelesen).
Allerdings werde ich es trotzdem zur Sicherheit verwenden.
*Prinzipiell* schreibe ich meine Scripte *immer* so, daß sie auch auf JS-1.0-Browsern keine Fehler produzieren. D.h., ich klammere *alles*, was seit 1.0 dazugekommen ist (in der einen oder anderen Weise - da bedarf es leider unterschiedlicher Strategien).
Aber wenn sich das erstmal "eingeschliffen" hat, hat man "ultra-sauberen" Code, ohne daß man sich beim Schreiben noch groß Gedanken machen muß. Man macht es einfach automatisch mit ... ;-))
Sind das nicht zu viele Klammern?
Äh, ja. Jeweils eine "}" zuviel (verdammtes Copy & Paste =;->). :-o
Boah, die Sachen gefallen mir ;-)
Hört man gerne. ;-)
<script type="text/javascript" language="JavaScript1.1"><!--
Nein: <script type="text/javascript" language="JavaScript">
Das "1.1" sorgt dafür, daß manche 1.0-Browser das Script erst gar nicht interpretieren. Das ist fürs Caching OK (ich hänge das immer separat ans Ende der HTML-Seite, damit diese Bilder möglichst zuletzt geladen werden), aber nicht hier.
Ein 1.0-Browser würde dann ggf. flip() & Co. anspringen wollen, aber die sind dann nicht da.
Der Fehler würde mir den Test mit dem Navigator 2.0 verhageln! ;-}
function switch(img,url) { document.images[img].src=url; }
Funktionen separat - außerhalb des "normalen" Codeflußes.
{ cache=new Array(); i=-1;
Hier braucht es keine "Bedingungsklammer" - ebenso verhält es sich mit dem Abschluß.
Das reicht mir doch eigentlich völlig so, oder?
<script ... language="JavaScript1.1">: Versteht der Browser kein JS 1.1, kommts dann bei onmouseover etc. zum Fehler oder überspringt er das JS einfach?S.o.: Fehler!
Also:
<script type="text/javascript" language="JavaScript"><!--
function switch(img,url) { if(document.images) { document.images[img].src=url; } }
function flip(name) { switch(name,name+"1.gif"]); }
function flop(name) { switch(name,name+"0.gif"]); }
function flup(name) { switch(name,name+"2.gif"]); }if(document.images) {
cache=new Array(); i=-1;
i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
i++; cache[i]=new Image(); cache[i].src="guckmal2.gif";
}
//--></script>function flip() //Dummy
Bei mehrere Funktionen gleichen Namens, wird stets die letzte genommen!
Du kannst also z.B. function flip() { } in der Seite definieren und anschließend die "richtige" flip() mittels einer externen JS-Datei nachladen.
Dann gibt es auch keinen Fehler, falls die externe Datei mal nicht verfügbar ist!
Was auch noch geht: Das Caching in eine Funktion und die dann per onLoad aufrufen. Dann werden die Rollovers wirklich erst geladen, wenn der Rest der Seite bereits geholt wurde.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Muchas gracias,
wieder was dazugelernt. War mir ein Fest mit Dir.
Bis mal wieder in irgendeinem anderen Thread vielleicht ;-)
Gruß, Robin
-
Hi,
wieder was dazugelernt. War mir ein Fest mit Dir.
Zuviel der Ehre.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
-
-
-
-
-
-
-
-
-
Nun auf eigenltich allen Beiträgen in Foren und erklärungen die ich gefunden habe war es meistens einfach von SelfHtml schlicht kopiert. Also es wurde fast immer so gemacht wie ich es angegeben habe.
So ist es prima ich probiers aus wenn ich nach Hause komme und gib dann durch ob es klappt.
Gruß und Danke Alex
-
-
-
-
Hi,
Dabei werden ja die Bilder vom Javascript gezählt. Wenn man sich nun aber einloggt, verändert sich das erste menu -> es werden mehr Links. Danach stimmt die Nummerrierung der Bilder natürlich nichtmehr.
Du kannst auf IMGs nicht nur über deren Elementnummer zugreifen. Id oder evtl. Name wären auch möglich.
freundliche Grüße
Ingo