nicht angemeldet
Highlight Grafische Buttons mit Maus
Hi Gemeinde,
hier mein Problem:
Natuerlich weiss ich wie ich eine Grafik tausche um einen highlight Effekt mit onmouseover und onmouseout zu machen, steht ja schliesslich gut beschrieben aud selfhtml.
Aber, wie mache ich dass wenn ich denselben Button mehr als einmal verwenden moechte? Das scheint naemlich nicht zu funktionieren.
Mit ein wenig Nachdenken scheint dies mir auch logisch zu sein, da ja immer das ganze Objekt getauscht wird, und da dieses Objekt oefter benutzt wird sollten entweder alle Buttons aufleuchten oder die Sache gar nicht mehr funktionieren. Letzteres ist der Fall.
Muss ich nun um doch noch zum Ziel fuer jeden dieser eigentlich identischen Buttons einen Eintrag machen wie:
img1On = new Image();
img1On.src ="button_on.gif";
img2On = new Image();
img2On.src ="button_on.gif";
img3On = new Image();
img3On.src ="button_on.gif";
und so weiter, halt so oft wie ich ihn brauche. Oder geht das auch nicht und Ihr habt einen anderen Vorschlag?
Gruesse und Dank,
Marc.
-
Hi
du könntest die Funktion aus DW nehmen:<script language="JavaScript">
<!--
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_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_findObj(n, d) { //v4.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);
if(!x && document.getElementById) x=document.getElementById(n); 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><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','',5.jpg',1)"><img name="Image1" border="0" src="3.jpg" width="200" height="44"></a>
Hoffentlich hilft dir das!
Viele Grüsse
Christian Straube
_____________________________________
Lexon2 >> Hosting im Baukastenprinzip
Edmund-Mansbart-Str. 8
74321 Bietigheim-Bissingen
Tel.: +49 71 42 - 58 09 90
Fax: +49 71 42 - 43 39 1
info@lexon2.de
www.lexon2.de-
Danke fuer die schnelle Hilfe,
ich werde wohl etwas brauchen um durch den Code durchzusteigen, schliesslich will ich auch wissen was ich da tue. Sieht jedenfalls sehr professionell aus. ;)
Danke erstmal,
Marc
-
Hallo,
ja der Code aus dem DW funktioniert auch immer, aber ich bevorzuge persönlich eine schlankere Codierung:
<head>
...
<script language="JavaScript" name="naviscript"><!--
{angebot0=new Image();
angebot0.src="../images/navi-angebot0.gif";
angebot1=new Image();
angebot1.src="../images/navi-angebot1.gif";kontakt0=new Image();
kontakt0.src="../images/navi-kontakt0.gif";
kontakt1=new Image();
kontakt1.src="../images/navi-kontakt1.gif";referenzen0=new Image();
referenzen0.src="../images/navi-referenzen0.gif";
referenzen1=new Image();
referenzen1.src="../images/navi-referenzen1.gif";}
function over(Name,Image,No)
{
document[Name].src=eval(Image+No+".src")
}
// -->
</script>
...
</head><body>
...
<a href="angebot1.html" target="Content" ;return true; onmouseover="over('angebot','angebot',1)" onmouseout="over('angebot','angebot',0)">
<img height="30" width="105" src="../images/navi-angebot1.gif" border="0" name="angebot">
...
etc.
</body>Das ist schlanker, Du weisst, was Du tust ;-), und es läuft.
-
Hi,
ja den kenne ich und habe ich auch schon benutzt. Nur, versuch mal die Grafik mehr als einmal zu benutzen ! Das geht so naemlich nicht, jedenfalls bei mir.
Trotzdem Danke,
Marc
Was heisst uebrigens dieses ominoese "DW" ? Sorry aber ich lese hier noch nicht so lange mit.
-
Hi,
also bei mir läuft das Script immer in jedem Browser, und wird bei jedem mouseover von neuem ausgeführt, logischerweise. Hör ich zum ersten Mal, dass es nur einmal funktionieren soll. Ist vielleicht speziell von DEINEM Rechner o.ä. abhängig. Aber das lässt sich einfach herausfinden. Du kannst den anderen, nicht so schlanken "DW"-Code einbauen, DW steht für Macromedia Dreamweaver. Das DW-Script ist fehlerfrei und läuft 100%. Wenns bei Dir nur einmal läuft mit eben diesem DW-Script (also nicht das von mir gepostete), dann liegts ausschliesslich an deiner Rechner-Browser-Kombination.
Das DW-Script läuft ganz ganz ganz sicher.Robin
-
Hi Robin,
Ich glaube Du hast mich nicht richtig verstanden. Natuerlich funktioniert das "Highlight" jedesmal aber:
Plaziere bitte von der Grafik die Du bei "mouseover" aenderst mal eine weitere Instanz auf Deiner Page. Geht es jetzt immer noch ? Bei mir nicht.
Ein Beispiel waere ein "Back" Button den man in verschiedenen Abschnitten der selben Seite immer wieder verwenden moechte.Gruss,
Marc
-
-
-
-
-
-
Hallo, Marc,
wie mache ich dass wenn ich denselben Button mehr als einmal verwenden moechte? Das scheint naemlich nicht zu funktionieren.
Doch - es spricht nichts dagegen, dieselben Objekte der Klasse (des Typs? ;)) »Image« zu verwenden, um die URLs der Bilder zu speichern.
Mit ein wenig Nachdenken scheint dies mir auch logisch zu sein, da ja immer das ganze Objekt getauscht wird
Nein, es werden keine »Objekte getauscht«. Im Grunde genommen ist das Definieren von Image-Objekten nur notwendig, damit die Highlightgrafiken vorgeladen werden und die normale URL gespeichert bleibt. Wenn man darauf verzichten will, könnte man die src-Eigenschaft des jeweiligen Elementobjekts (welches einen DOM-Knoten repräsentiert oder umgekehrt) auch direkt ändern, indem man ihr eine URL zuweist.
und da dieses Objekt oefter benutzt wird
Das erstellte Objekt selbst bleibt unverändert. Es wird nur die src-Eigenschaft eines Image-Objekts ausgelesen, welches mit den Bildern des Dokuments, welche sich als Image-Objekte unter document.images herumtreiben, nichts direkt zu tun hat.
Diese src-Eigenschaft ist wie gesagt nur eine Zeichenkette, welche auch in einer Variable (einem Variablenobjekt) des Typs String gespeichert sein könnte.sollten entweder alle Buttons aufleuchten
Nein, es wird immer nur *einem ganz bestimmten* Bildobjekt *des Dokuments* ein neuer src-Wert zugewiesen, welcher einem anderen Objekt entnommen wird, nämlich dem, welches du im Script explizit erstellst.
Wenn du den src-Eigenschaftswert des am Anfang des Script erstellten Image-Objekts änderst, tut sich auf der Seite überhaupt nichts. Zumindest wenn es keine entsprechendes img-Element mit einem name-Attributwert existiert, welches mit dem Objektnamen des Image-Objekts übereinstimmt.oder die Sache gar nicht mehr funktionieren
Nein. Es müsste zumindest eine Fehlermeldung angezeigt werden, welche du für die Analyse des Problems verwenden solltest.
Letzteres ist der Fall.
Das kann nicht sein. Dann sind deine Beobachtungen nicht präzise genug oder du hast keine detaillierten Untersuchungen angestellt, das heißt die Fehlermeldungen nicht beachtet und ausgewertet.
Muss ich nun um doch noch zum Ziel fuer jeden dieser eigentlich identischen Buttons einen Eintrag machen wie: (...) und so weiter, halt so oft wie ich ihn brauche
Nein, das ist unnötig. Zwei Image-Objekte pro Grafikpaar reicht, egal wie oft diese Grafik im Dokument eingebunden wird. Du musst lediglich jedem img-Element im Dokument ein eindeutiges name-Attribut zuweisen, damit es als Unterobjekt von document auftaucht und du dessen Eigenschaft src verändern kannst.
Oder geht das auch nicht und Ihr habt einen anderen Vorschlag?
Eine abgewandelte Version des Selfhtml-Beispiels:
<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" xml:lang="de">
<head>
<title>Dynamische grafische Buttons</title>
<script type="text/javascript">var button=new Image();
button.src="button.png";var buttonh=new Image();
buttonh.src="buttonh.png";function wechsle (bildname, obj) {
window.document[bildname].src=obj.src;
}</script>
</head>
<body><p><a href="murks.html" onmouseover="wechsle('button_eins', buttonh)" onmouseout="wechsle('button_eins', button)"><img src="button.png" name="button_eins" alt="..." /></a></p>
<p> ... </p>
<p><a href="murks.html" onmouseover="wechsle('button_zwei', buttonh)" onmouseout="wechsle('button_zwei', button)"><img src="button.png" name="button_zwei" alt="..." /></a></p>
</body>
</html>Über den wechsle()-Funktionsaufuruf in den onmouseover- und onmouseout-Attributen wird im ersten Parameter der name-Attributwert der zu ändernden Grafik übergeben, im zweiten Parameter das (kein img-Element repräsentierendes) Image-Objekt, welches in seiner src-Eigenschaft die neue URL enthält.
Wie du siehst, sind die eingebundenen Bilder und die Hoverbilder gleich (das wolltest du doch...?). Auch ist der zweite Parameter jeweils gleich (das Objekt button beziehungsweise buttonh). Alleinig mit dem ersten Parameter wird auf eine *bestimmte* Grafik mit dem angegebenen name-Attribut verwiesen (die innerhalb des a-Elements). Dadurch wird immer nur die URL einer bestimmten Grafik geändert...
Grüße,
Mathias--
Mein Leben, ein Leben ist es kaum, / Ich gehe dahin als wie im Traum.
Wie Schatten huschen die Mensch hin, / Ein Schatten dazwischen ich selber bin.
Und im Herzen tiefe Müdigkeit - / Alles sagt mir: Es ist Zeit ...
(Theodor Fontane, Mein Leben)-
Hallo Matthias,
danke fuer die umfangreichen Tips und Erklaerungen. Es hat funktioniert. Die Bilder muessen halt irgendwie voneinander unterschieden werden.
Nochmals vielen Dank,
Marc.
sobald ich das eingebaut habe ist das ganze dann hier zu sehen:
www.marc-heise.de/SA/sa_locations.html (der "close" button)
-