✔ onMousOver and Out, Bild1=Bild1=Bild2

Status
Nicht offen für weitere Antworten.
cille

cille

Erfahrenes Mitglied
Hi ho,
wie der Titel schon sagt soll sich bei Mous Over and Out die Schaltfläche ändern,
dass ist wenn 1 Bild sich ändert ganz Easy,
aber nicht wenn mehrere Bilder sich ändern sollen:
Hier mein Beispiel wie das sein soll:

10 Bild links die sich selber ändern wenn die Maus über Ihr ist.
Aber dann ist woanders noch ein einzelnes Bild, dass ändert sich auch wenn man über die 10 Bild links geht, aber es soll immer das passende bild sein.

Bild1 Link (Von den 10 anderen) = Bild2 Info(einzelnes bild)
http://www.lala.de/bucher.html = BILD: Hier geht es zu den Büchern (steht im bild)

Bild2 Link (Von den 10 anderen) = Bild2 Info(einzelnes bild)
http://www.lala.de/kontakt.html = BILD: Hier geht es zum Kontakt (steht im Bild)

hier mal das was ich versucht habe:
HTML: 
                          <tr>
                            <td width="106" height="107" valign="top"><a href="die_druckerei.php" onMouseOver="austausch1.src='images/02_roll.gif';" onmouseout="austausch1.src='images/02.gif';" ><img name="austausch1" src="images/02.gif" width="109" height="107" border="0" align="top" /></a></td>
                            <td width="300" height="107" colspan="3" valign="top"><img name="austausch1; austausch2; usw...." src="images/03.gif" width="300" height="107" border="0" align="top" /></td> <!--Hier ist das einzelne Bild, was sich austauschen soll wenn die anderen MouseOvert and Out werden-->
                          </tr>
                          <tr>
                            <td width="106" height="99" valign="top"><a href="siebdruck.php" onMouseOver="austausch2.src='images/09_roll.gif';" onmouseout="austausch2.src='images/09.gif';"><img name="austausch2" src="images/09.gif" width="109" height="99" border="0" align="top" /></a></td>
                            <td width="99" height="99" valign="top"><a href="leistungen.php" onMouseOver="austausch3.src='images/10_roll.gif';" onmouseout="austausch3.src='images/10.gif';"><img name="austausch3" src="images/10.gif" width="99" height="99" border="0" align="top" /></a></td>
                            <td width="201" height="99" colspan="2" valign="top"><img src="images/11.gif" width="201" height="99" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="101" valign="top"><a href="plakate.php" onMouseOver="austausch4.src='images/12_roll.gif';" onmouseout="austausch4.src='images/12.gif';"><img name="austausch4" src="images/12.gif" width="109" height="101" border="0" align="top" /></a></td>
                            <td width="99" height="101" valign="top"><a href="bucher.php" onMouseOver="austausch5.src='images/13_roll.gif';" onmouseout="austausch5.src='images/13.gif';"><img name="austausch5" src="images/13.gif" width="99" height="101" border="0" align="top" /></a></td>
                            <td width="50" height="101" valign="top"><a href="kunstdruck_am_bau.php" onMouseOver="austausch6.src='images/14_roll.gif';" onmouseout="austausch6.src='images/14.gif';"><img name="austausch6" src="images/14.gif" width="103" height="101" border="0" align="top" /></a></td>
                            <td width="98" height="101" valign="top"><img src="images/15.gif" width="98" height="101" border="0" align="top" /></td>
                          </tr>
                          <tr>
                            <td width="109" height="115" valign="top"><a href="referenzen.php" onMouseOver="austausch7.src='images/16_roll.gif';" onmouseout="austausch7.src='images/16.gif';"><img name="austausch7" src="images/16.gif" width="109" height="115" border="0" align="top" /></a></td>
                            <td width="99" height="115" valign="top"><a href="kontakt.php" onMouseOver="austausch8.src='images/17_roll.gif';" onmouseout="austausch8.src='images/17.gif';"><img name="austausch8" src="images/17.gif" width="99" height="115" border="0" align="top" /></a></td>
                            <td width="103" height="115" valign="top"><a href="links.php" onMouseOver="austausch9.src='images/18_roll.gif';" onmouseout="austausch9.src='images/18.gif';"><img name="austausch9" src="images/18.gif" width="103" height="115" border="0" align="top" /></a></td>
                            <td width="98" height="115" valign="top"><a href="login.php" onMouseOver="austausch10.src='images/19_roll.gif';" onmouseout="austausch10.src='images/19.gif';"><img name="austausch10" src="images/19.gif" width="98" height="115" border="0" align="top" /></a></td>
                          </tr>

Hoffe Ihr könnt mir helfen,
bin nicht der Held in "DIV" Tags und so, wenn Ihr eine Antwort wisst, bitte leicht und verständlich erklären :D

DANK EUCH SCHONMAL
 
Wieso tauscht du die Hintergrundbilder der Buttons nicht mit CSS und tauscht das zusätzliche Bild mit Javascript, so wie du es in deinem Quelltext schon angedacht hast?

P.S. Deine beiden Links führen ins Nirvana.
 
Hi danke das du mir helfen kannst.
Zu deinem PS:
Es war ja auch nur ein Beispiel.

Ja aber wie mach ich das, könntest du mir vieleicht, dies beschreiben und wie man das macht, wie gesagt, mit DIV bzw SPAN codes hab ich noch nicht so viel am hut,
aber währe schön wenn du mir das erklären kannst, dann hab ich wiedermal was gutes gelern.

DICKES THX
 
Hier mal ein grundlegendes Beispiel, wie mit CSS die Hintergrundgrafik eines Links getauscht werden kann:

Code: 
a:link, a:visited {
display: block;
width: 100px; /* Grafikbreite */
height: 22px; /* Grafikhöhe */
background: url(bgImage_1.png);
}

a:hover {
background: url(bgImage_2.png);
}
Da du für jeden Link eine andere Hintergrundgrafik verwendest, müsstest du für jeden Link eine ID erzeugen, um so für jeden einzelnen Link seinen Grafiktausch regeln zu können:

Code: 
/* Globale Einstellung für alle Links */
a.menu:link, a:menu:visited { 
display: block;
width: 100px; /* Grafikbreite */
height: 22px; /* Grafkhöhe */
}

/* Link 1 */
a#ID_1:link, a#ID_1:visited {
background: url(bgImage_1.1.png);
}
a#ID_1:hover {
background: url(bgImage_1.2.png);
}

/* Link 2 */
a#ID_2:link, a#ID_2:visited {
background: url(bgImage_2.1.png);
}
a#ID_2:hover {
background: url(bgImage_2.2.png);
}

/* usw. */
HTML: 
<a href="#" class="menu" id="ID_1">Link 1</a>
<a href="#" class="menu" id="ID_2">Link 2</a>
<!-- usw. -->
Zu guter letzt fügst du in den Links noch die beiden Eventhandler onmouseover und onmouseout ein, um das zusätzliche Bild mittels Javascript zu tauschen, so wie du es in deinem Quellcode praktiziert hast.
 
Hey danke,
schön simpel erklärt :D
so muss aber trotzdem mal ein wenig durchstöbern und die einzelnen sachen anschauen was du geschrieben hast um das in "KOPF" reinzukriegen.

DICKES THX,
ich meld mich wenn ich es geschaft habe, ansonsten frag ich nochmal was falsch ist
 
bei dem wo sich das bild je nach Overlink ändert,
was muss ich da reinschreiben habe jetzt nur:
HTML: 
<td width="300" height="107" colspan="3" valign="top" background="images/03.gif"></td>

und bei den 10 links ist das so:
HTML: 
<a href="die_druckerei.php" class="menu" id="ID_1" onMouseOver="austausch1.src='images/02_roll.gif';" onmouseout="austausch1.src='images/02.gif';" ><img name="austausch1" src="images/02.gif" width="109" height="107" border="0" align="top" /></a>
<td width="106" height="99" valign="top"><a href="siebdruck.php" class="menu" id="ID_2" onMouseOver="austausch2.src='images/09_roll.gif';" onmouseout="austausch2.src='images/09.gif';"><img name="austausch2" src="images/09.gif" width="109" height="99" border="0" align="top" /></a>
<td width="99" height="99" valign="top"><a href="leistungen.php" class="menu" id="ID_3" onMouseOver="austausch3.src='images/10_roll.gif';" onmouseout="austausch3.src='images/10.gif';"><img name="austausch3" src="images/10.gif" width="99" height="99" border="0" align="top" /></a>

ist das so korrekt?
 
kann mir denn keiner helfen?
wie kann ich bei der eingabe:
<td width="300" height="107" colspan="3" valign="top" background="images/03.gif" class="menu" \>

das umtauschen lassen, es funktioniert nicht :(
 
So ich habe jetzt dies in die .css datei eingesetzt
style.css
Code: 
/* Bilderumtauschen */
/* Globale Einstellung für alle Links */
a.menu:link, a.menu:visited { 
	display: block;
	width: 300px;
	height: 107px;
	background: url(images/03.gif);
}

/* Link 1 */
a#ID_1:link, a#ID_1:visited {
	background: url(images/03.gif);
}
a#ID_1:hover {
	background: url(images/roll_01.gif);
}

/* Link 2 */
a#ID_2:link, a#ID_2:visited {
	background: url(images/03.gif);
}
a#ID_2:hover {
	background: url(images/roll_02.gif);
}

/* Link 3 */
a#ID_3:link, a#ID_3:visited {
	background: url(images/03.gif);
}
a#ID_3:hover {
	background: url(images/roll_03.gif);
}

/* Link 4 */
a#ID_4:link, a#ID_4:visited {
	background: url(images/03.gif);
}
a#ID_4:hover {
	background: url(images/roll_04.gif);
}

/* Link 5 */
a#ID_5:link, a#ID_5:visited {
	background: url(images/03.gif);
}
a#ID_5:hover {
	background: url(images/roll_05.gif);
}

/* Link 6 */
a#ID_6:link, a#ID_6:visited {
	background: url(images/03.gif);
}
a#ID_6:hover {
	background: url(images/roll_06.gif);
}

/* Link 7 */
a#ID_7:link, a#ID_7:visited {
	background: url(images/03.gif);
}
a#ID_7:hover {
	background: url(images/roll_07.gif);
}

/* Link 8 */
a#ID_8:link, a#ID_8:visited {
	background: url(images/03.gif);
}
a#ID_8:hover {
	background: url(images/roll_08.gif);
}

/* Link 9 */
a#ID_9:link, a#ID_9:visited {
	background: url(images/03.gif);
}
a#ID_9:hover {
	background: url(images/roll_09.gif);
}

/* Link 10 */
a#ID_10:link, a#ID_10:visited {
	background: url(images/03.gif);
}
a#ID_10:hover {
	background: url(images/roll_010.gif);
}

/* usw. */

So schaut der Code aus der sowieso mit Javascript sich austauscht:
HTML: 
<td width="106" height="107" valign="top"><a href="die_druckerei.php" id="ID_1" onMouseOver="austausch1.src='images/02_roll.gif';" onmouseout="austausch1.src='images/02.gif';" ><img name="austausch1" src="images/02.gif" width="109" height="107" border="0" align="top" /></a></td>

Und so sieht die Leere Tabellenzelle aus was immer getauscht werden muss wenn man über so ein link geht wie oben aufgezählt:
HTML: 
<td width="300" height="107" colspan="3" valign="top" class="menu" \></td>

Was ist da falsch, und warum funktioniert das nicht?
 
Wenn du in den globalen Einstellungen für alle Links mit der Klasse .menu die Grafik 03.gif als Hintergrundbild einrichtest, muß sie nicht nochmal für jede ID bestimmt werden:

Code: 
/* Bilderumtauschen */
/* Globale Einstellung für alle Links */
a.menu:link, a.menu:visited { 
	display: block;
	width: 300px;
	height: 107px;
	background: url(images/03.gif);
}

/* Link 1 */
a#ID_1:hover {
	background: url(images/roll_01.gif);
}

/* Link 2 */
a#ID_2:hover {
	background: url(images/roll_02.gif);
}

/* Link 3 */
a#ID_3:hover {
	background: url(images/roll_03.gif);
}

/* Link 4 */
a#ID_4:hover {
	background: url(images/roll_04.gif);
}

/* Link 5 */
a#ID_5:hover {
	background: url(images/roll_05.gif);
}

/* Link 6 */
a#ID_6:hover {
	background: url(images/roll_06.gif);
}

/* Link 7 */
a#ID_7:hover {
	background: url(images/roll_07.gif);
}

/* Link 8 */
a#ID_8:hover {
	background: url(images/roll_08.gif);
}

/* Link 9 */
a#ID_9:hover {
	background: url(images/roll_09.gif);
}

/* Link 10 */
a#ID_10:hover {
	background: url(images/roll_010.gif);
}
So sieht der dazugehörige HTML-Quelltext aus:
HTML: 
<a href="#" class="menu" id="ID_1">link 1</a>
<a href="#" class="menu" id="ID_2">link 2</a>
In den Links werden also nicht nochmal die Grafiken eingebunden, die schon mittels CSS als Hintergrundbild festgelegt sind.

Nun möchtest du, daß beim Überfahren der Links zusätzlich in einer Tabellenzelle ein weiteres Bild eingeblendet wird.

Füge in dieser Zelle eine Grafik deiner Wahl mit dem Namen austausch ein:
HTML: 
<td><img src="./images/pic_00.jpg" name="austausch" alt=""></td>
und tausche sie Folgendermassen:
HTML: 
<a href="#" class="menu" id="ID_1" onmouseover="austausch.src='./images/pic_01.jpg'" onmouseout="austausch.src='./images/pic_00.jpg'">link 1</a>
<a href="#" class="menu" id="ID_2" onmouseover="austausch.src='./images/pic_02.jpg'" onmouseout="austausch.src='./images/pic_00.jpg'">link 2</a>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück