Hovereffekt bei Bildern

[kloppi]

also ich hätte da mal ne frage:
auf http://8345t.83.ohost.de/band.rar
kann man sich ein preview von meiner aktuellen bandseite runterladen
bevor ich fertige bilder und texte und alles machen wollte, wollte ich das design und alles fertig haben.
meine frage:
bei band will ich dass:
wenn man mit der maus über die gitarre (schwarz weiß) fährt, die gitarre (in farbe)
dort erscheint wo vorher die andere war.
ich hab mir überlegt das müsste eventuell mit nem hovereffekt gehen, aber wie das funktionieren soll kann ich mir nicht vorstellen (ja ich habe auch gegugelt^^).
die bilder vom jeweiligen instrument sind sowohl in schwarzweiß als auch in farbe vorhanden.
kann mir jemand weiterhelfen oder mir vllt den quelltext zukommen lassen?
vielen dank schonmal für die hilfe

ach ja, falls ihr noch andere tips oder anmerkungen zum design oder aufbau habt:
http://8345t.83.ohost.de/band/index.html
da kann man sich die auch ansehn ohne runterzuladen.
vielen dank schonmal für die hilfe

 

[Rheumakai]

welche programme benutzt du zu erstellen?

 

[EvolutionVII]

Probiers mit dreamweaver, das brauchst du wirklich nur noch klicken ... Ansonsten lass ich dir den Code zukommen.

 

[Vali]

Eine kleine Anmerkung: Es könnte Urheberrechtsprobleme geben, weil die Produktbilder von den Herstellern sicher geschützt sind und ich bezweifle doch sehr, dass die selbst fotografiert sind.

Zum Hovereffekt:
Wie kann ich mir das vorstellen? Wenn ich mit der Maus über die schwarzweiße Gitarre fahre, wird sie farbig?
Ohje, ich habe selbst sowas mal mit einem runtergeladenem Javascript bei einer Seitennavigation gemacht. Leider habe ich den Originalcode nicht mehr, aber ich versuch mal den einigermaßen wieder herzustellen.

Rot = variabel

Bildname.jpg = Schwarzweißgitarre
Bildname_over.jpg = Buntgitarre

In den Header schreibst du:

<script language="JavaScript" type="text/javascript">
<!-- Dummy comment to hide code from non-JavaScript browsers.

if (document.images) {
Bildname_off = new Image(); Bildname_off.src = "Bildname.jpg"
Bildname_over = new Image(); Bildname_over.src = "Bildname_over.jpg"
}

function turn_off(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "_off.src");
}
}

function turn_over(ImageName) {
if (document.images != null) {
document[ImageName].src = eval(ImageName + "_over.src");
}
}

// End of dummy comment -->
</script>
<base target="Wo der Link geöffnet werden soll">

Unter body schreibst du dann:

<a href="Pfad wohin die Reise gehen soll" onmouseout="turn_off('Bildname')" onmouseover="turn_over('Bildname')" target="Wo der Link geöffnet werden soll">
<img name="Bildname" src="Bildname.jpg" alt="Ein Alternativtext, z.B. Unser Gitarrist" border="0" width="Bildbreite" height="Bildhöhe">
</a>

Naja, ich versteh nichts von Javascripts, aber es funktioniert zumindest. Vielleicht meldet sich ja noch einer, der sich darin besser auskennt.

 

[BenChnobli]

Sonst könntest du es auch mit einfachem CSS versuchen. Hier gibt es die Beschreibung dazu.

Hoffe, das hilft
Gruss, Ben

 

[EvolutionVII]

Sonst könntest du es auch mit einfachem CSS versuchen. Hier gibt es die Beschreibung dazu.

Wollt ich auch grad sagen ... Das ist die verständlichere Lösung

 

[ars ultima]

Auch aus Gründen der Barrierefreiheit sollte auf Javascript verzichtet werden, wenn es nicht unbedingt nötig ist. Und ein einfacher Hovereffekt lässt sich eben auch mit CSS machen.

 

[Vali]

Da lernt man ja immer dazu. Die CSS Variante ist da natürlich die bessere Lösung. Funktioniert auch bei Usern ohne Javaaktivierung und lädt schneller.