WCM Forum - mehrere Mouseover - mehrere Bildwechsel

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - mehrere Mouseover - mehrere Bildwechsel - eine Position je Kategorie (http://www.wcm.at/forum/showthread.php?t=233734)

mehrere Mouseover - mehrere Bildwechsel - eine Position je Kategorie

Hallo Leute,

Ich bräuchte mal eure Hilfe, trotz intensiver Suche konnte ich zu folgendem nichts hilfreiches finden.

Linke Seite:
Ich habe mehrere Namen in einer Liste,
wenn man "mouseover" über die Namen fährt,
sollen rechts entsprechende Bilder dazu gezeigt werden.

Rechte Seite:
Hier ist das "Standart" Bild und wird je nach mouseover Anweisung ersetzt.

Zusätzliche Herausforderung:
Die Liste ist alphabetisch sortiert, meist stehen rund 10 Namen pro Buchstaben und je Buchstaben steht rechts ein Bild.

Bsp:

"B" - 10 Namen mit B - Grundbild mit dem Buchstaben B

Bettina
Buch
Baum
Bier
Ball
...

mouseover in der B-Kategorie --> soll rechts die zugehörigen Bilder zeigen.

Ich hoffe ich konnte das halbwegs beschreiben, danke im Voraus für eure Hilfe.

mfg

Wenn ich dich richtig verstanden habe, ist das ja nur so ein kleines javascript:

HTML-Code:

<script type="text/javascript">

function change_image(src) {

    myImage = document.getElementById("showImg");

    myImage.src = src;

    return false;

}

</script>

<div id="list">

    <a href="#" onmouseover="change_image('bild2.jpg')">Bettina</a>

    <a href="#" onmouseover="change_image('bild3.jpg')">Buch</a>

</div>

<div id="image">

    <img src="bild3.jpg" id="showImg" />

</div>

Ob die Alphabetisch sortiert sind oder nicht ist doch egal oder wo genau ist dein Problem?

lg Matthias

Hmm, nicht ganz.
Vielleicht hilft eine Grafik.

ein Lösungsvorschlag.
Achtung die mitgegeben Jpg's in dem Ordner "bilder" speichern, dann funkts auch.
mfg
Wicked Wizz

<html>
<head>
<meta name="author" content="Wicked Wizz">
<style type="text/css">
body {font-family:Arial,Helvetica,Sans-Serif;
background-color:#000000;}
a {color:yellow;}
#a1 {position:absolute; top:10px; left:820px;}
#b1 {position:absolute; top:110px; left:820px;}
#c1 {position:absolute; top:210px; left:820px;}
#d1 {position:absolute; top:310px; left:820px;}
</style>
<script type="text/javascript">
function bilda()
{
document.getElementById("a1").src="bilder/nummer01.jpg"
document.getElementById("a1").alt=""
}
function blanka()
{
document.getElementById("a1").src="bilder/nummernix.jpg"
document.getElementById("a1").alt=""
}
function bildb()
{
document.getElementById("b1").src="bilder/nummer02.jpg"
document.getElementById("b1").alt=""
}
function blankb()
{
document.getElementById("b1").src="bilder/nummernix.jpg"
document.getElementById("b1").alt=""
}
function bildc()
{
document.getElementById("c1").src="bilder/nummer03.jpg"
document.getElementById("c1").alt=""
}
function blankc()
{
document.getElementById("c1").src="bilder/nummernix.jpg"
document.getElementById("c1").alt=""
}
function bildd()
{
document.getElementById("d1").src="bilder/nummer04.jpg"
document.getElementById("d1").alt=""
}
function blankd()
{
document.getElementById("d1").src="bilder/nummernix.jpg"
document.getElementById("d1").alt=""
}

</script>
</head>
<body>
<a id="a" onmouseover="bilda();" onmouseout="blanka();" >a</a>
<img id="a1" src="bilder/nummernix.jpg" alt="">
<br />
<a id="b" onmouseover="bildb();" onmouseout="blankb();">b</a>
<img id="b1" src="bilder/nummernix.jpg" alt="">
<br />
<a id="c" onmouseover="bildc();" onmouseout="blankc();">c</a>
<img id="c1" src="bilder/nummernix.jpg" alt="">
<br />
<a id="d" onmouseover="bildd();" onmouseout="blankd();">d</a>
<img id="d1" src="bilder/nummernix.jpg" alt="">
<br />
</body>
</html>

Also für jedes Bild eine neue Funktion zu machen ist ein Unsinn, wozu gibts denn die Möglichkeit einer Funktion Parameter zu übergeben?

Habs jetzt nicht getestet, aber das Prinzip sollte klar sein:

HTML-Code:

<html>

<head>

<script type="text/javascript">

function change_img(image,target) {

    mytarget = document.getElementById(target);

    mytarget.src = image;

}

</script>

</head>

<body>

<div id="div-a">

    <h2>Bilder mit A</h2>

    <a href="#" onmouseover="change_img('bilda1.gif','img-a')">Bild A1</a>

    <a href="#" onmouseover="change_img('bilda2.gif','img-a')">Bild A2</a>

    <a href="#" onmouseover="change_img('bilda3.gif','img-a')">Bild A3</a>        

    <img id="img-a" src="bilda1.gif" />

</div>

<div id="div-b">

    <h2>Bilder mit B</h2>

    <a href="#" onmouseover="change_img('bildb1.gif','img-b')">Bild B1</a>

    <a href="#" onmouseover="change_img('bildb2.gif','img-b')">Bild B2</a>

    <a href="#" onmouseover="change_img('bildb3.gif','img-b')">Bild B3</a>        

    <img id="img-b" src="bildb1.gif" />

</div>

</body>

</html>

[edit]Gerade getestet: Funktioniert.

Nur wer etwas tut kann Kritik ERNTEN.

Du hast natuerlich recht lieber zAPPEL!!!!!

War auch nur eine Fingerübung, mehr nicht.
Wollte es bloß ein bißchen anschaulicher machen ;).

mfg
Wicked Wizz

Hier nun die geschlankte Version.
mfg
Wicked Wizz

Who wants to reveal the treasure of Beale.

Code:

<html>

<head>

<meta name="author" content="Wicked Wizz">

<style type="text/css">

body    {font-family:Arial,Helvetica,Sans-Serif;

         background-color:#000000;}

a    {color:yellow;}

#a1    {position:absolute; top:10px; left:820px;}

#b1    {position:absolute; top:110px; left:820px;}

#c1    {position:absolute; top:210px; left:820px;}

#d1    {position:absolute; top:310px; left:820px;}

</style>

<script type="text/javascript">

function get_bild(bildid,bildname)

{

    document.getElementById(bildid).src=bildname

    document.getElementById(bildid).alt=""

}

function get_blank(bildid)

{

    document.getElementById(bildid).src="bilder/nummernix.jpg"

    document.getElementById(bildid).alt=""

}

</script>

</head>

<body>

<a id="a" onmouseover="get_bild('a1','bilder/nummer01.jpg');" onmouseout="get_blank('a1');" >a</a>

<img id="a1" src="bilder/nummernix.jpg" alt="">

<br />

<a id="b" onmouseover="get_bild('b1','bilder/nummer02.jpg');" onmouseout="get_blank('b1');" >b</a>

<img id="b1" src="bilder/nummernix.jpg" alt="">

<br />

<a id="c" onmouseover="get_bild('c1','bilder/nummer03.jpg');" onmouseout="get_blank('c1');" >c</a>

<img id="c1" src="bilder/nummernix.jpg" alt="">

<br />

<a id="d" onmouseover="get_bild('d1','bilder/nummer04.jpg');" onmouseout="get_blank('d1');" >d</a>

<img id="d1" src="bilder/nummernix.jpg" alt="">

<br />

</body>

</html>

Herzlichen Dank an euch beide !

@zAPPEL
Das war genau das was ich gesucht habe.

Nochmals danke an euch für die rasche Hilfe !

:bier: