wie bekomme ich auf einfache Art einen Mouseover-Effekt bei Bilder hin?

Moin Moin,

ich habe ein Service im Internet gefunden wo man so etwas ganz einfach generieren kann.

http://www.kreativrauschen.de/tools/roll-over-generator/

so sieht der Code aus:

<a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>

Zitat von JoEy

Moin Moin,

ich habe ein Service im Internet gefunden wo man so etwas ganz einfach generieren kann.

http://www.kreativrauschen.de/tools/roll-over-generator/

so sieht der Code aus:

PHP

<a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>

besser ist es wie gesagt es ist ein bild das per css in der höhre verrückt wird, das andere ist eher die "oldschool"-variante.

Hallo,

ich werde verrückt. Wie kann ich 5 bilder nebeneinander als rollover-image anzeigen? :/ Ich habe hover-optimiert2 versucht aber es kommt nur untereinander zugeordnet.

Außerdem diese generator-code habe ich auch versucht, links konnte man öffnen aber rollover-effekt wird es nicht bei 5 bildern (einzeln funktoniert es super).

<a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>   <a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>

Mit freundlichen Grüßen
PortableCoffee

Zitat von PortableCoffee

Hallo,

ich werde verrückt. Wie kann ich 5 bilder nebeneinander als rollover-image anzeigen? :/ Ich habe hover-optimiert2 versucht aber es kommt nur untereinander zugeordnet.

statt

a.ad1:hover {
      background: url(logocreations.png) 0 -35px no-repeat;
      }

mach mal

a.ad1:hover {
      background: url(logocreations.png) -35px 0  no-repeat;
      }

dann verschiebt sich das bild nach links ...

Erstmal vielen dank für deinen Antwort. Leider funktoniert es nicht, oder ich bin einfach zu blöd dafür. :/ Trotzdem untereinander.

Mit freundlichen Grüßen
PortableCoffee

also zum Rollovereffekt:

Bei mehreren Rolloverbildern müssen die Codes alle unterschiedliche Namen haben. Also wenn wir den Beispielcode mal verwenden. der Name dieses Codes ist

name="rog2011450000"

das steht insgesamt 3mal drin
siehe Code

<a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>

Statt "rog2011450000" kann man auch eine andere Bezeichnung nehmen z.B. "Bild1" oder sinnvollerweise die Bezeichnung des Links. Beim 2ten Bild dann also 3mal Bild2 oder eben die 2te Linkbezeichnung
zum testen hab ich mal einfach nur die letzte Zahl geändert.

<a href="http://www.gmx.de" onmouseover="rog2011450001.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450001.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450001" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450002.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450002.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450002" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450003.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450003.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450003" border="0"/></a>   <a href="http://www.gmx.de" onmouseover="rog2011450004.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450004.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450004" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450005.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450005.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450005" border="0"/></a>

Wenn du den Code so einfügst sind auch alle Bilder nebeneinander. Es seiden die Bilder haben da wo du sie einfügst keinen Platz und werden deshalb untereinander angezeigt.
Gibt es einen Link zu deiner Seite

Zitat von Art of Pic

also zum Rollovereffekt:

Bei mehreren Rolloverbildern müssen die Codes alle unterschiedliche Namen haben. Also wenn wir den Beispielcode mal verwenden. der Name dieses Codes ist

Code

name="rog2011450000"

das steht insgesamt 3mal drin
siehe Code

Code

<a href="http://www.gmx.de" onmouseover="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450000.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450000" border="0"/></a>

Statt "rog2011450000" kann man auch eine andere Bezeichnung nehmen z.B. "Bild1" oder sinnvollerweise die Bezeichnung des Links. Beim 2ten Bild dann also 3mal Bild2 oder eben die 2te Linkbezeichnung
zum testen hab ich mal einfach nur die letzte Zahl geändert.

Code

<a href="http://www.gmx.de" onmouseover="rog2011450001.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450001.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450001" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450002.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450002.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450002" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450003.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450003.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450003" border="0"/></a>   <a href="http://www.gmx.de" onmouseover="rog2011450004.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450004.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450004" border="0"/></a><a href="http://www.gmx.de" onmouseover="rog2011450005.src='http://www.ipic.cc/uploads/01.06.2010_12:13:54_1.png'" onmouseout="rog2011450005.src='http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png'"><img src="http://www.ipic.cc/uploads/01.06.2010_12:13:20_1_2.png" name="rog2011450005" border="0"/></a>

Wenn du den Code so einfügst sind auch alle Bilder nebeneinander. Es seiden die Bilder haben da wo du sie einfügst keinen Platz und werden deshalb untereinander angezeigt.
Gibt es einen Link zu deiner Seite

Vielen vielen dank Art of Pic, endlich funktoniert es einwandfrei. Leider ist es noch nicht online (localhost installiert). Nochmals vielen dank.

Mit freundlichen Grüßen
PortableCoffee