nicht angemeldet
Menue> Bildaustausch
0 0 
Gernot Back
0 0 0 Gernot Back
0 0 Gernot Back
0 0 Gernot Back
0 Gernot Back
0
Menue> Bildaustausch
Hallo, ich habe ein Menü mit Bildern, die bei onMouseOver jeweils ausgetauscht werden.
Ich möchte, dass bei onClick das Austauschbild weiter angezeigt wird und erst zurückgetauscht wird, wenn eine neues Menüelement geklickt wird.
Wie mache ich das?!?
Vielen Dank für Hilfe.
Nadine
-
Hallo Nadine,
Hallo, ich habe ein Menü mit Bildern, die bei onMouseOver jeweils ausgetauscht werden.
hier ist sowas: http://de.selfhtml.org/javascript/beispiele/buttons.htm
Viel Spaß!
Lisa -
Hallo nadine,
Ich möchte, dass bei onClick das Austauschbild weiter angezeigt wird und erst zurückgetauscht wird, wenn eine neues Menüelement geklickt wird.
Wie mache ich das?!?Für so etwas brauchst du dann auch tatsächlich Javascript, denn anders als das Pseudo-Format :hover, mit dem du das mouseOver auch ohne JS hinkriegst verhält sich das Pseudo-Format :active leider nicht in allen Browsern gleich.
Also mit Javascript: Du legst dir eine globale Variable "merk" an, in der du dir jeweils das angeklickte Objekt merkst: onclick="merk=this;tausch()" beim MouseOut knüpft du den Rücktausch zum ursprünglichen Bild einfach an die Bedingung, dass es sich nicht um das ge_merk_te Objekt handelt.
Gruß Gernot
-
hi,
Für so etwas brauchst du dann auch tatsächlich Javascript, denn anders als das Pseudo-Format :hover, mit dem du das mouseOver auch ohne JS hinkriegst verhält sich das Pseudo-Format :active leider nicht in allen Browsern gleich.
und selbst wenn :active in allen browsern _richtig_ ungesetzt würde, wäre es für dieses vorhaben untauglich.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
... und wie geht es dann?!?
Wenn du es weißt wäre es nett, wenn du mir helfen würdest.
Danke
-
Hallo nadine,
... und wie geht es dann?!?
In dem Punkt, wie es geht, (mit Javascript) hat mir wahsaga nicht widersprochen, nur darin, welche theoretischen Alternativen es mit CSS geben könnte, und da hatte er Recht, die gibt es so nicht.
Gruß Gernot
-
Hi Gernot,
danke, dass du mir hilfst.
Wie du sicher gemerkt hast bin ich absolute Anfängerin.
Leider kapiere ich das noch nicht so.Ich hab jetzt eine globale Variable angelegt, doch ich weiß nicht weiter.
Bitte erkäre es mir doch mal für beginners.
Danke.Hier ist ein Auszug aus meinem Quelltext vielleicht kannst du es mir ja anhand dessen erklären.
Wäre supi!<script type="text/javascript">
var merk
onclick="merk=this;tausch()";</script>
<body>
<TD width="51" height="22"><A href="content_home.html" target="content" 'right')" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','pictures/home_2.jpg',1);
MM_goToURL('parent.frames['right']','right_frame.html');return document.MM_returnValue">
<IMG src="pictures/home_1.jpg" width="51" height="22" border="0" name="Image1"></A>
</TD>-
Hallo nadine,
Hier ist ein Auszug aus meinem Quelltext vielleicht kannst du es mir ja anhand dessen erklären.
<TD width="51" height="22"><A href="content_home.html" target="content" 'right')" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','pictures/home_2.jpg',1);
MM_goToURL('parent.frames['right']','right_frame.html');return document.MM_returnValue">
<IMG src="pictures/home_1.jpg" width="51" height="22" border="0" name="Image1"></A>
</TD>offensichtlich arbeitest du mit Dreamweaver, du rufst ja hier einige MM_Funktionen auf. Diese müssten entsprechend angepasst werden. Solche Anpassungen von Dreamweaver-Funktionen sind aber erst recht nichts für Anfänger und sogar mir zu kompliziert.
Da schreibt man sich lieber das ganze Skript selbst.
Ich schau mal, ob ich ein Komplett-Beispiel für dich finde, an dem du dich orientieren kannst.
Gruß Gernot
-
So ein Mist! Dieser blöde DW!
Ich danke dir sehr, dass du dir so viel Mühe für mich machst!
Liebe Grüße
Nadine-
Hallo nadine,
ich habe dir mal was gebastelt. Die Kommentare im Quellcode (alles was hinter doppelten Schrägstrichen steht) kannst du natürlich löschen. Bitte tu mir aber den Gefallen und versuche sie vorher zu verstehen, auch, indem du die verwendeten Techniken mal selbst hier in SELFHTML nachschaust, damit du dich mal von Dreamweaver unabhängig machen kannst.
Als Beispiel-Buttons habe ich die in diesem SELF-Beispiel benutzt. Dabei handelt es sich um GIFs, für die es jeweils eine normale Version ohne "h" vor dem ".gif" gibt und eine gehighlightete mit "h" vor dem ".gif". Natürlich kannst du für deine Butons auch andere Bildformate und eine andere Kennung für die gehighlightete Version nehmen, dann musst du das Skript aber entsprechend anpassen. Ich glaube, das schaffst du dann.
<html> <head> <title>Merkbutton</title> <meta name="author" content="Gernot Back"> <meta name="generator" content="Ulli Meybohms HTML EDITOR"> <script type="text/javascript"> [code lang=javascript] var merk; // global deklarierte Variable function rein (button) { var pfad = button.getElementsByTagName('IMG')[0].src; // Quelle der ersten Grafik im Link if(pfad.indexOf('h.gif')<0) { // wenn es sich nicht bereits um die gehighlightete Version handelt pfad = pfad.substring(0,pfad.indexOf('.')) + 'h.gif'; // wird der Button gehighlightet button.getElementsByTagName('IMG')[0].src = pfad; } } function raus (button) { if(button!=merk) { // wenn es sich nicht um den zuletzt angeklickten Button handelt var pfad = button.getElementsByTagName('IMG')[0].src; pfad = pfad.substring(0,pfad.indexOf('h.')) + '.gif'; // zurück zur Normalversion button.getElementsByTagName('IMG')[0].src = pfad; } } function klick (button) { merkAlt=merk; // Zwischenspeichern des zuletzt gemerkten Buttons, möglicherweise "undefined" merk=button; // Aktuell geklickten Button merken if(merkAlt) // wenn zuvor schon einmal ein Button gemerkt wurde, also nicht "undefined" raus(merkAlt); // Highlighting des nicht mehr akuellen Buttons entfernen }</script>
</head>
<body>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
<img src="button1.gif" width="130" height="30" border="0" alt="Home"></a><br>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
<img src="button2.gif" width="130" height="30" border="0" alt="Helferlein"></a><br>
<a href="#" onMouseOver="rein(this)" onMouseOut="raus(this)" onClick="klick(this)">
<img src="button3.gif" width="130" height="30" border="0" alt="Layouts"></a><br>
</body>
</html>
[/code]Allerdings funktioniert das Skript nur mit Browsern, die die verwendeten DOM-Methoden verstehen, das dürften aber inzwischen die meisten sein, und da kann man auf solche Klimmzüge, wie sie Dreamweaver macht, um auch die wenigen alten Browser noch zu bedienen gut verzichten, meine ich.
Gruß Gernot
-
Hallo nochmal,
böse Falle:
pfad = pfad.substring(0,pfad.indexOf('.')) + 'h.gif';
//hier muss es
pfad = pfad.substring(0,pfad.indexOf('.gif')) + 'h.gif';
// und hier:pfad = pfad.substring(0,pfad.indexOf('h.')) + '.gif';
pfad = pfad.substring(0,pfad.indexOf('h.gif')) + '.gif';
heißen, sonst gibt es spätestens, wenn du das Ding online stellst mit den velen Punkten im Internet-Bildpfad Chaos, weil dieser sonst am ersten Punkt abgeschnitten wird. Gruß Gernot -
WOW!!!
Ich danke dir 1000fach! Für deine Geduld und deine Hilfe!Ich verspreche dir, dass ich mich dahinter klemmen werde das zu verstehen.
Will ja was lernen. ;-)Danke Danke Danke!
LG
Nadine
-
-
-
-
-
-
-
-