mouseover über Text, Bild soll geändert werden

eddy_p · 10 Januar 2007

Hallo Leute,

bin momentan am JAVA lernen, daher habt bitte Verständnis :-D

Also ich hab folgendes Problem:

Ich möchte, dass einen mouseover Effekt zu einen Text erstellen, dazu soll sich ein Bild, was weiter links ist, ändern.

Kurz eine kleine Beschreibung.
(es ist nur Testweise)
Angenommen eine Liste von Urlaubsorten:

Spanien
Kroatien [position eines Bildes]
Frankreich
England

Weiter links ist ein Bild (URLAUB.JPG). Wenn ich jetzt mit der Maus über SPANIEN gehe, soll das Bild von Spanien (SPANIEN.JPG) geladen werden.
Gehe ich nun über Kroatien, so soll das Bild von Kroatien (KRATIEN.JPG) geladen werden usw.

Ich denke mal, ihr wisst was ich meine und brauche es nicht weiter erklären.
Habe bereits schon bei SELFHTML geguckt, aber nichts passendes gefunden!

Würd mich freun, wenn ich hier Hilfe bekommen würde :-D

aber bitte kein Fachchinesisch

-> Bin absoluter Anfänger :cry:

Würd mich freun, wenn der Quellcode möglichst verständnissvoll wäre :mrgreen:

Bedanke mich im Voraus!

mfg
Eddy

Web_spider · 10 Januar 2007

zu aller erst
Java != javascript ;)
Also du suchst Javascript nehme ich an.
gannz einfach du packst jedes wort in ein span
also:

HTML:

<span>Spanien</span>
<span>Kroatien</span> 
<span>Frankreich</span>
<span>England</span>

Oben im head erstellst du die funktion switchImage().

HTML:

<head>
...
<script type="text/javascript">
function switchImage(Bild)
 {
      var Bild2 = getElementById("urlaub");
      document.Bild2.src=Bild;
 }
</script>
</head>

Dann machst du:

HTML:

<span onmouseover="switchImage('SPANIEN.jpg');">Spanien</span>
<span onmouseover="switchImage('KROATIEN.jpg');">Kroatien</span> 
<span onmouseover="switchImage('FRANKREICH.jpg');">Frankreich</span>
<span onmouseover="switchImage('ENGLAND.jpg');">England</span>
<!-- Das Bild -->
<img src="URLAUB.jpg" id="urlaub">

Wenn du noch möchtest, dass wenn man wieder den Namen verlässt wieder URLAUB.jpg erscheint machst du:

HTML:

<span onmouseover="switchImage('SPANIEN.jpg');" onmouseout="switchImage('URLAUB.jpg');">Spanien</span>
 <span onmouseover="switchImage('KROATIEN.jpg');" onmouseout="switchImage('URLAUB.jpg');">Kroatien</span> 
 <span onmouseover="switchImage('FRANKREICH.jpg');" onmouseout="switchImage('URLAUB.jpg');">Frankreich</span>
 <span onmouseover="switchImage('ENGLAND.jpg');" onmouseout="switchImage('URLAUB.jpg');">England</span>
<!-- Das Bild -->
<img src="URLAUB.jpg" id="urlaub">

Hier nochmal Zusammengefasst:

HTML:

<html>
<head>
<title>...</title>
<!-- Meta Angaben ... -->
<script type="text/javascript">
function switchImage(Bild)
{
     var Bild2 = getElementById("urlaub");
     document.Bild2.src=Bild;
}
</script>
</head>
<body>
<!-- CODE CODE CODE -->
<span onmouseover="switchImage('SPANIEN.jpg');" onmouseout="switchImage('URLAUB.jpg');">Spanien</span>
  <span onmouseover="switchImage('KROATIEN.jpg');" onmouseout="switchImage('URLAUB.jpg');">Kroatien</span> 
  <span onmouseover="switchImage('FRANKREICH.jpg');" onmouseout="switchImage('URLAUB.jpg');">Frankreich</span>
  <span onmouseover="switchImage('ENGLAND.jpg');" onmouseout="switchImage('URLAUB.jpg');">England</span>
<!-- Das Bild -->
 <img src="URLAUB.jpg" id="urlaub">
<!-- CODE CODE CODE -->
</body>
</html>

Hoffe ich konnte dir helfen

greez web_spider

mouseover über Text, Bild soll geändert werden

eddy_p

Neues Mitglied

Web_spider

Neues Mitglied

Neueste Beiträge