Bilderwechsel mit Link und Maps
snafu
- javascript
Moin,
ich habe ein Problem mit dem Bilderwechsel:
Ich habe eine Tabelle in der Art:
|----------T----------|
| 1 | 2 |
|----------+----------|
| | |
| 3 | 4 |
| | |
|----------i----------|
Wenn jetzt die Mouse über Feld (bzw. Bild) 1 geht soll sich in Feld 3 eine Bild, dass als Menü dient, erscheinen.
Das Menü soll mit Maps in Links unterteilt werden.
Das gleiche gilt für 2 und 4.
Frage:
Wie bekomme ich es jetzt möglichst einfach hin, dass man mit der Maus von Feld eins in Feld drei kann, ohne dass das Bild wieder verschwindet und dass das neue Bild mit Maps in Links eingeteilt werden kann?
Danke für jeden Tipp :-)
Stephan
|----------T----------|
| 1 | 2 |
|----------+----------|
| | |
| 3 | 4 |
| | |
|----------i----------|
Hi!
hm, eine Idee -- keine Ahnung, ob sie so funktioniert -- wäre die folgende:
Event_handler für:
* Bild 1&2:
onMouseOver="zeigeBilder34()"
onMouseOut lässt du weg
* Bild 3&4:
onMouseOut="versteckeBilder34()"
wobei du die area & map-Tags nur dann aktivierst, wenn Bild 3 bzw. 4 aktiviert ist, also quais in die Funktion zeigeBilder34 einbindest ...
So würde zumindest ich einmal einen Ansatz versuchen, aber, wie gesagt, Angaben wie immer ohne Gewähr! ;-)
Greetingz,
Manfred
Hi, menphrad !!
Ein fertiges Skript kommt immer besser, wah !?
;o))
<html><head><title></title>
<script language="javascript">
function zeige (hallo)
{document.getElementById(hallo).style.visibility='visible';}
</script>
<body>
<table border="1">
<tr>
<td width="200" height="100" onMouseOver="zeige ('Bild_1')"> </td>
<td width="200" height="100" onMouseOver="zeige ('Bild_2')"> </td>
</tr>
<tr>
<td width="200" height="300">
<map name="imagemap_1"><area shape="rect" coords="10,10,30,30" href="url_1.htm"></map>
<img src="1.jpg" id="Bild_1" style="visibility:hidden" usemap="#imagemap_1" border="0"></td>
<td width="200" height="300">
<map name="imagemap_2"><area shape="rect" coords="10,10,30,30" href="url_2.htm"></map>
<img src="2.jpg" id="Bild_2" style="visibility:hidden" usemap="#imagemap_2" border="0"></td>
</tr>
</table>
</body></html>
Hi, snafu !!
Hier die DOM-Version . . .
Dies ist natuerlich nur das Grundgeruest und muss halt noch entsprechend ausgebaut werden !
Du machst das schon !!
:o))
Hi, menphrad !!
Ein fertiges Skript kommt immer besser, wah !?
;o))
Mich so tief in hypothetischen Gedanken zu wälzen ... dafür war ich zuerst schon zu müde! ... Aber wie man sieht, hast Du mir die Arbeit ja eh abgenommen? *g* ;-)
Greetingz,
Manfred
Hi, menphrad !!
Ein fertiges Skript kommt immer besser, wah !?
;o))
Und ein vollständiges Script kommt immer *noch* besser, wah! ;-)
NEU: Jetzt auch mit der "Verstecke-Funktion"! *g*
<html><head><title></title>
<script language="javascript">
function zeige (hallo){
document.getElementById(hallo).style.visibility='visible';
}
function verstecke (hallo){
document.getElementById(hallo).style.visibility='hidden';
}
</script>
<body>
<table border="1">
<tr>
<td width="200" height="100" onMouseOver="zeige ('Bild_1')"> </td>
<td width="200" height="100" onMouseOver="zeige ('Bild_2')"> </td>
</tr>
<tr>
<td width="200" height="300" onMouseOut="verstecke ('Bild_1')">
<map name="imagemap_1"><area shape="rect" coords="10,10,30,30" href="url_1.htm"></map>
<img src="1.jpg" id="Bild_1" style="visibility:hidden" usemap="#imagemap_1" border="0"></td>
<td width="200" height="300" onMouseOut="verstecke ('Bild_2')">
<map name="imagemap_2"><area shape="rect" coords="10,10,30,30" href="url_2.htm"></map>
<img src="2.jpg" id="Bild_2" style="visibility:hidden" usemap="#imagemap_2" border="0"></td>
</tr>
</table>
</body></html>
Greetingz,
Manfred
Und ein vollständiges Script kommt immer *noch* besser, wah! ;-)
Heurido !!
Da hatter Recht !!
:o))
Hi menphrad und 08/15,
Vieeeeeeeeeeeeeeelen Dank euch beiden :-)
Das ist perfekt. Super!
Danke
Stephan :-)
Geeeeeeeeeeeeeerneeeeeeeeee! Freut mich, dass ich helfen konnte! ;-)
*Viel Erfolg noch!*
Greetingz,
Manfred