Hyperlink in Grafikbereich einsetzen un zu neuer Grafik verlinken

[Mamsell]

Hallo,

ich möchte folgendes Beispiel eigenständig realisieren:
http://www.mietwagen-uschi.de/index.php

Ich möchte ein Auto abbilden, welches bei einem Mausklick oder besser Mouse Rollover ein neues Bild öffnet, wie im Beispiel z. B. die Motorhaube oder Fahrertür.

Als Editor nutze ich MS Expression 4, fand aber bislang keine Möglichkeit.

Für Tipps bin ich sehr dankbar.

Grüße

 

[wirelessy]

Psst, guck dir mal den Quellcode an

 

[areiland]

Sowas macht man in Javascript und lässt beim Mouseover einfach ein anderes Bild einsetzen.

Das ist die nötige Javascript Funktion in der das Ausgangsbild und die Bider zum Tauschen stehen:

on=new Image ();
on.src="../buttons/button_on.gif";
off=new Image ();
off.src="../buttons/button_off.gif";
click=new Image ();
click.src="../buttons/button_click.gif";
var a, button;
function tauschen0 (a, button)
{
 window.document.images[a].src=off.src;
}
function tauschen1 (a, button)
{
 window.document.images[a].src=on.src;
}
function tauschen2 (a, button)
{
 window.document.images[a].src=click.src;
}
function tauschen3 (a, button)
{
 window.document.images[a].src=off.src;
}

Und das ist die Sequenz zum Tauschen, die beim Fahren über das Bild für den Austausch sorgt:

onmouseover="tauschen0 (0,off)" onmouseout="tauschen1 (0,on)" onmousedown="tauschen2 (0,click)" onmouseup="tauschen3 (0,off)"

Musst Du Dir halt anpassen.

 

[Mamsell]

Danke, aber wie bind eich Java in die Seite ein, kann mir vielleicht jemand den kompletten HTML Code nennen? Danke.

 

[Speedy.]

So etwas macht man eben nicht in JavaScript, sondern in stinknormalem CSS mit :hover. So haben es die Ersteller der Webseite auch gemacht.

Schnapp dir Chrome oder Firefox, geh per F12 in die DEV-Tools und schau dir den HTML- und CSS-Aufbau der Seite an. Dann lernst du am ehesten, wie es funktioniert.

 

[wirelessy]

JavaScript bindest du mit

<script>alert();</script>

zum Beispiel ein.

 

[Daaron]

...aber wie bind eich Java in die Seite ein

JavaScript hat GAR NICHTS mit Java zu tun.

kann mir vielleicht jemand den kompletten HTML Code nennen?

Stand in deiner Eröffnugn nicht was von "eigenständig"? Also jetzt soll doch das Forum für dich die Arbeit erledigen...


Aber mal ein paar Hinweise, wie so etwas funktionieren kann.
1.) So, wie die das auf der Seite gelöst haben... mit absolut positionierten Elementen. Kann man machen, muss/sollte man aber eher nicht.
2.) Indem man eine verweissensitive Grafik mit Hilfe der Elemente <map> und <area> anlegt.

In Verbindung mit den HTML5-Data-Attributen und etwas CSS3 kann man hier problemlos einen Bildwechsel gänzlich ohne JavaScript erzeugen. JS ist natürlich auch eine Möglichkeit, auch hier bietet sich aber ein Data-Attribut zur Übersicht mit an.

 

[Mamsell]

Danke Euch, werde das in Ruhe ausprobieren.

Gibt es hier vielleicht jemanden, der sowas umsetzen kann?