Fallweises UseMap von Andreas, 22.01.2003 11:14

Fallweises UseMap

Andreas 22.01.2003 11:14

javascript

Hallo,
ich habe eine Art Bildershow gemacht, wo unter dem Bild eine programierte Scroll-Leiste die Bilder lädt.
Jetzt möchte ich daß wenn das Bild XY geladen wird, Bsp ein bild mit einer Tür, die Tür anklickbar ist. Nur sollte diese Region auf den anderen Bildern nicht existieren. Nachfolgend mein Code.
Gruß Andreas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<script language="javascript">

function imgOn(img_name,img_src) {
document[img_name].src=img_src;
}

function anzeigen(i){
switch (i){
   case 1: imgOn("detail","ZimmerBilder/1b1.jpg");break;
   case 2: imgOn("detail","ZimmerBilder/1b2.JPG");break;
   case 3: imgOn("detail","ZimmerBilder/1b3.JPG");break;
   case 4: imgOn("detail","ZimmerBilder/1b4.JPG");break;
   case 5: imgOn("detail","ZimmerBilder/1b5.JPG");break;
   case 6: imgOn("detail","ZimmerBilder/1b6.JPG");break;
   case 7: imgOn("detail","ZimmerBilder/1b7.JPG");break;
   case 8: imgOn("detail","ZimmerBilder/1b8.JPG");break;
   case 9: imgOn("detail","ZimmerBilder/1b9.JPG");break;
   case 10: imgOn("detail","ZimmerBilder/1b10.JPG");break;
   case 11: imgOn("detail","ZimmerBilder/1b11.JPG");break;
   case 12: imgOn("detail","ZimmerBilder/1b12.JPG");break;
   case 13: imgOn("detail","ZimmerBilder/1b13.JPG");break;
}}
</script>
</head>

<body><br>
<h1 align="center">Rundgang durch das Zimmer Nr. 1</h3>
<br>
<P align=center>
<IMG src="ZimmerBilder/1b1.JPG" alt="" name="detail" border=0 height="250" usemap="#Bild"></P>

</body>
</html>

Beitrag melden

– Informationen zu den Bewertungsregeln

Fallweises UseMap
molily Homepage des Autors 22.01.2003 15:01

javascript
– Informationen zu den Bewertungsregeln
Hallo, Andreas,

ich habe eine Art Bildershow gemacht, wo unter dem Bild eine programierte Scroll-Leiste die Bilder lädt.
Jetzt möchte ich daß wenn das Bild XY geladen wird, Bsp ein bild mit einer Tür, die Tür anklickbar ist. Nur sollte diese Region auf den anderen Bildern nicht existieren.

Du kannst mittels des DOM nachträglich die Koordinaten des area-Elements der Image Map ändern. Somit kannst du den aktiven Bereich aktivieren und deaktivieren, Beispielsweise folgendermaßen:

<script type="text/javascript">
function raus () {
document.getElementById('murks').coords='0,0,0,0';
}
function rein () {
document.getElementById('murks').coords='50,50,200,150';
}
</script>
...
<p><img src="a.png" alt="..." usemap="#bild"></p>
...
<map name="bild">
<area id="murks" shape="rect" coords="50,50,200,150" href="murks.html" alt="Zurück zur Zimmerauswahl" title="Zurück zur Zimmerauswahl">
</map>
...
<p onclick="raus()">weg mit der imagemap</p>
<p onclick="rein()">hin mit der imagemap</p>

Die Aufrufe musst du natürlich auch zusätzlich für das Microsoft-DHTML-Modell (document.all) implementieren und vorher abfragen, ob die DOM-Funktionen zur Verfügung stehen, siehe http://selfhtml.teamone.de/dhtml/modelle/ für eine Cross-Browser-Lösung. Obiges Beispiel habe ich auf MSIE 6 und Mozilla 1.2 getestet.

Ich würde dir jedoch empfehlen, es mit statischen Hypertextseiten anstatt mit JavaScript und exotischen, unzuverlässigen DHTML-Zugriffen zu lösen.

Grüße,
Mathias

--
»(...) hier ist ja alles voll Gelegenheiten. Nur gibt es freilich Gelegenheiten, die gewissermaßen zu groß sind, um benützt zu werden; es gibt Dinge, die an nichts anderem als an sich selbst scheitern. Ja, das ist staunenswert.«
http://www.kafka.org/projekt/schloss/erst.html
Beitrag melden

–
Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Andreas: Fallweises UseMap