mehrere Mouseover - mehrere Bildwechsel - eine Position je Kategorie

WA5 · 10.03.2009, 03:13

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

zAPPEL · 10.03.2009, 09:20

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

WA5 · 12.03.2009, 19:34

Hmm, nicht ganz.
Vielleicht hilft eine Grafik.

Wicked Wizz · 13.03.2009, 06:34

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>

zAPPEL · 13.03.2009, 06:47

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.

Wicked Wizz · 13.03.2009, 15:32

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

Wicked Wizz · 13.03.2009, 16:01

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>

WA5 · 13.03.2009, 16:13

Herzlichen Dank an euch beide !

@zAPPEL
Das war genau das was ich gesucht habe.

Nochmals danke an euch für die rasche Hilfe !

10.03.2009, 03:13	#1
WA5 Veteran Registriert seit: 09.10.2000 Beiträge: 442	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

10.03.2009, 09:20	#2
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	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 ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett

13.03.2009, 15:32	#6
Wicked Wizz Newbie Registriert seit: 26.11.2008 Beiträge: 8	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

13.03.2009, 16:13	#8
WA5 Veteran Registriert seit: 09.10.2000 Beiträge: 442	Herzlichen Dank an euch beide ! @zAPPEL Das war genau das was ich gesucht habe. Nochmals danke an euch für die rasche Hilfe !

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)