Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag23.07.2010 um 08:03 (UTC)    
Titel: Hoovereffekt bei verlinkten Bilder in mehreren rechten Boxen

Zu diesem Thema hab ich zwar einiges im Forum gefunden, aber richtig weitergekommen bin ich noch nicht.

Bei meiner eigenen HP http://warmerfamily.de.tl, habe ich in drei rechten Boxen jeweils ein Bild mit Verlinkung eingefügt die bei Klick auf einer neuen Seite geöffnet werden, klappt auch bestens mit diesen Codes:


Code Box 1

<a target=_blank href="http://www.warmer-mobildisco.de.tl"><img src="http://img.webme.com/pic/w/warmerfamily/200.jpg"/></a>

Code Box 2

<a target=_blank href="http://www.schalke04.de"><img src="http://img.webme.com/pic/w/warmerfamily/schalke.jpg"/></a>

Code Box 3

<a target=_blank href="http://www.hannover-indians.de"><img src="http://img.webme.com/pic/w/warmerfamily/indians1.jpg"/></a>


Nun wollte ich gerne einen Hoover-Effekt einfügen, bei dem die jeweiligen Bilder beim drüberfahren dunkler werden (Habe die drei Bilder in einer dunkleren Version hochgeladen, jeweils mit einem „a“ dahinter) um deutlicher zu machen, dass es sich um klickbare Links handelt. Dafür habe ich in Box 3 den Code durch diesen ersetzt:

<script language="JavaScript">
aus1 = new Image();
aus1.src = "http://img.webme.com/pic/w/warmerfamily/indians1.jpg";
an1 = new Image();
an1.src = "http://img.webme.com/pic/w/warmerfamily/indians1a.jpg";
</script>
<a target=_blank href="http://hannover-indians.de/" onmouseover="a1.src='http://img.webme.com/pic/w/warmerfamily/indians1a.jpg';"
onmouseout="a1.src='http://img.webme.com/pic/w/warmerfamily/indians1.jpg';" name="a1"><img
src="http://img.webme.com/pic/w/warmerfamily/indians1.jpg" border="0" alt="" name="a1"></a>


Klappt bestens, ist die Maus auf dem Bild wird es dunkeler, ist die Maus wieder runter, wird es wieder hell. Wenn ich dann als nächstes den Code in Box 2 durch diesen ersetze, tut sich nicht nur nichts, sondern der Hoover-Effekt in Box 3 ist auch wieder aufgehoben!!?


Zuletzt bearbeitet von warmerfamily am 23.07.2010, 09:09, insgesamt einmal bearbeitet
Beitrag23.07.2010 um 08:24 (UTC)    
Titel:

Den Code habe ich übrigens aus einem geschlossenen Thema.


Zitat:

Diesen Teil des Codes am Anfang der Seite einfügen (Quellcode):

Code:
<script language="JavaScript">
aus1 = new Image();
aus1.src = "http://img.webme.com/pic/w/worldofygo/zumforum.png";
an1 = new Image();
an1.src = "http://img.webme.com/pic/w/worldofygo/zumforum_hover.png";
</script>


Diesen Code dorthin, wo das Bild platziert werden soll:

Code:

<a href="http://worldofygo.forumieren.com/" onmouseover="a1.src='http://img.webme.com/pic/w/worldofygo/zumforum_hover.png';"
onmouseout="a1.src='http://img.webme.com/pic/w/worldofygo/zumforum.png';" name="a1"><img
src="http://img.webme.com/pic/w/worldofygo/zumforum.png" border="0" alt="" name="a1"></a>

Was heißt "diesen Teil des Codes am Anfang der Seite einfügen"??? In jede Box???
Beitrag23.07.2010 um 10:43 (UTC)    
Titel:

Hallo,
du musst im Code immer die Klassen erweitern,
dazu steht in der 3. Box dieser Code:
Zitat:
<script language="JavaScript">
aus1 = new Image();
aus1.src = "http://img.webme.com/pic/w/warmerfamily/indians1.jpg";
an1 = new Image();
an1.src = "http://img.webme.com/pic/w/warmerfamily/indians1a.jpg";
</script>
<a target=_blank href="http://hannover-indians.de/" onmouseover="a1.src='http://img.webme.com/pic/w/warmerfamily/indians1a.jpg';"
onmouseout="a1.src='http://img.webme.com/pic/w/warmerfamily/indians1.jpg';" name="a1"><img
src="http://img.webme.com/pic/w/warmerfamily/indians1.jpg" border="0" alt="" name="a1"></a>
In der 2. Box lautet dann der Code so:
Zitat:
<script language="JavaScript">
aus2 = new Image();
aus2.src = "http://img.webme.com/pic/w/warmerfamily/indians1.jpg";
an2 = new Image();
an2.src = "http://img.webme.com/pic/w/warmerfamily/indians1a.jpg";
</script>
<a target=_blank href="http://hannover-indians.de/" onmouseover="a2.src='http://img.webme.com/pic/w/warmerfamily/indians1a.jpg';"
onmouseout="a2.src='http://img.webme.com/pic/w/warmerfamily/indians1.jpg';" name="a2"><img
src="http://img.webme.com/pic/w/warmerfamily/indians1.jpg" border="0" alt="" name="a2"></a>
Die Klassen müssen immer entsprechend erweitert werden Wink
In der 3. Box würde dann ein "a3" vorkommen.
Die Bild URL kannst du natürlich noch austauschen.

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beitrag23.07.2010 um 11:31 (UTC)    
Titel:

Ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh, nun ist der Groschen gefallen!!!!

Vielen Dank für die schnelle Hilfe, hat wunderbar geklappt!







Kann wegen mir geschlossen werden.
Beitrag23.07.2010 um 11:33 (UTC)    
Titel:

Okay Wink
Danke für die Rückmeldung!

mfg Dominik
______________
Besucht die offizielle Hilfeseite vom Homepage-Baukasten:

Iceblue Generator | Red Generator | Butterfly Generator
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de