Imagemap und Bildergalerie von JürgenB, 08.11.2007 17:01

Imagemap und Bildergalerie

sarah 08.11.2007 15:52

javascript

Hallo
Ich bräuchte einen Tip für ein ImageMap Problem.
Ich habe eine Bildergalerie (nix neues...) und hätte dort auf dem ersten Bild (also Bild 1 von 28) gern einen Maillink oder Hyperlink (eine Image Map).

Mein Problem nun: Die Bildergalerie wird mittels eines Div's definiert. Image map und Div ist ja auch kein problem, wenn man ein <img src="..."> Tag hat. Hab ich nun aber nicht. Da die Bildergalerie durch Javascript generiert wird.

Wie kann man es schaffen, im Javascript selber die image-Map Angaben einzufügen?
Ich habe schon verschiedenes ausprobiert und das Problem gegoogled aber kein passendes Rezept gefunden.

Weiss da jemand Rat?

Hier ausschnitte aus meinem Code (Array)

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";

var myImages = new Array();
myImages[1] = { 'src' : 'pics/innenarchitektur.jpg',
'dsc' : '     ' };

liebe Grüsse
Sarah

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

JürgenB Homepage des Autors 08.11.2007 16:05

javascript

– Informationen zu den Bewertungsregeln

Hallo sarah,

ich habe das noch nie probiert, aber versuch doch mal

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";

myImages[1].usemap = "....";

Gruß, Jürgen

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

sarah 08.11.2007 16:14

javascript

– Informationen zu den Bewertungsregeln

Hallo sarah,

ich habe das noch nie probiert, aber versuch doch mal

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/innenarchitektur.jpg";

myImages[1].usemap = "....";

Gruß, Jürgen

Danke soweit, hört sich irgendwie gut an, nun meine Frage: SO?

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/produktgestaltung.jpg";
myImages[1].usemap = "#produktgestaltung_Map";

und dann im <body>
<div id="imgGallerie">
<map name="produktgestaltung_Map">
<area shape="rect" alt="""" coords="35,52,94,69" href="http://www.formpol.ch" target="_blank">
</map>
</body>

Oder kann man bei myImages[1].usemap =".." gleich die Koordinaten und so reinpacken?

lg
sarah

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

JürgenB Homepage des Autors 08.11.2007 17:01

javascript

– Informationen zu den Bewertungsregeln

Hallo sarah,

Danke soweit, hört sich irgendwie gut an, nun meine Frage: SO?

var myImages = new Array();
myImages[1] = new Image();
myImages[1].src = "pics/produktgestaltung.jpg";
myImages[1].usemap = "#produktgestaltung_Map";

und dann im <body>
<div id="imgGallerie">
<map name="produktgestaltung_Map">
<area shape="rect" alt="""" coords="35,52,94,69" href="http://www.formpol.ch" target="_blank">
</map>
</body>

ja, so habe ich mir das gedacht. Geht das nicht?

Gruß, Jürgen

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

sarah 09.11.2007 10:06

javascript

– Informationen zu den Bewertungsregeln

Moinsen

nö.. das klappt nicht, so zeigt er mir gar nix an im browser.. :(

liebe grüsse
sarah

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

JürgenB Homepage des Autors 09.11.2007 11:20

javascript

– Informationen zu den Bewertungsregeln

Hallo sarah,

nö.. das klappt nicht, so zeigt er mir gar nix an im browser.. :(

also nur eine weiße Seite? Fehlermeldung?
Poste mal den ganzen relevanten Code.

Gruß, Jürgen

Beitrag melden

– Informationen zu den Bewertungsregeln

Imagemap und Bildergalerie

sarah 09.11.2007 13:21

javascript

– Informationen zu den Bewertungsregeln

also nur eine weiße Seite? Fehlermeldung?

speziefisch nur die image gallery, rest wird angezeigt

Poste mal den ganzen relevanten Code.

.. gern
Le voilà

  
<?php  
 require_once('includes/main.inc.php');  
?>  
  
<?php include('header.inc.php'); ?>  
  
<script type="text/javascript">  
var myImages = new Array();  
myImages[1] = new Image();  
myImages[1].src = "pics/produktgestaltung.jpg";  
myImages[1].usemap = "#produktgestaltung_Map";  
myImages[2] = new Image();  
myImages[2].src = "pics/3_1_1.jpg";  
myImages[3] = new Image();  
myImages[3].src = "pics/3_1_2.jpg";  
myImages[4] = new Image();  
myImages[4].src = "pics/3_1_3.jpg";  
myImages[5] = new Image();  
myImages[5].src = "pics/3_1_4.jpg";  
myImages[6] = new Image();  
myImages[6].src = "pics/3_1_5.jpg";  
myImages[7] = new Image();  
myImages[7].src = "pics/3_1_6.jpg";  
myImages[8] = new Image();  
myImages[8].src = "pics/3_1_7.jpg";  
myImages[9] = new Image();  
myImages[9].src = "pics/3_1_8.jpg";  
myImages[10] = new Image();  
myImages[10].src = "pics/3_1_9.jpg";  
myImages[11] = new Image();  
myImages[11].src = "pics/3_1_10.jpg";  
myImages[12] = new Image();  
myImages[12].src = "pics/3_1_11.jpg";  
myImages[13] = new Image();  
myImages[13].src = "pics/3_1_12.jpg";  
myImages[14] = new Image();  
myImages[14].src = "pics/3_1_13.jpg";  
myImages[15] = new Image();  
myImages[15].src = "pics/3_1_14.jpg";  
myImages[16] = new Image();  
myImages[16].src = "pics/3_1_15.jpg";  
myImages[17] = new Image();  
myImages[17].src = "pics/3_1_16.jpg";  
myImages[18] = new Image();  
myImages[18].src = "pics/3_1_17.jpg";  
myImages[19] = new Image();  
myImages[19].src = "pics/3_1_18.jpg";  
myImages[20] = new Image();  
myImages[20].src = "pics/3_1_19.jpg";  
myImages[21] = new Image();  
myImages[21].src = "pics/3_1_20.jpg";  
myImages[22] = new Image();  
myImages[22].src = "pics/3_1_21.jpg";  
myImages[23] = new Image();  
myImages[23].src = "pics/3_1_22.jpg";  
myImages[24] = new Image();  
myImages[24].src = "pics/3_1_23.jpg";  
myImages[25] = new Image();  
myImages[25].src = "pics/3_1_24.jpg";  
myImages[26] = new Image();  
myImages[26].src = "pics/3_1_25.jpg";  
myImages[27] = new Image();  
myImages[27].src = "pics/3_1_26.jpg";  
myImages[28] = new Image();  
myImages[28].src = "pics/3_1_27.jpg";  
  
  
  
  
  var myImages = new Array();  
 myImages[1] = { 'src' : 'pics/produktgestaltung.jpg',  
                'dsc' : '<a href="http://www.formpol.ch" target="_blank" text-decoration="none">Formpol</a>',};  
  
 myImages[2] = { 'src' : 'pics/3_1_1.jpg',  
                'dsc' : 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs, Zürich)' };  
  
 myImages[3] = { 'src' : 'pics/3_1_2.jpg',  
                'dsc' : 'Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs Zürich)' };  
  
 myImages[4] = { 'src' : 'pics/3_1_3.jpg',  
                'dsc' : 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs Zürich)' };  
  
 myImages[5] = { 'src' : 'pics/3_1_4.jpg',  
                'dsc' : 'Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs, Zürich)' };  
  
 myImages[6] = { 'src' : 'pics/3_1_5.jpg',  
                'dsc' : 'Intertime, Sessel «Nubian»' };  
  
 myImages[7] = { 'src' : 'pics/3_1_6.jpg',  
                'dsc' : 'Intertime, Sofaprogramm «Nubian»' };  
  
 myImages[8] = { 'src' : 'pics/3_1_7.jpg',  
                'dsc' : 'Intertime, Sofaprogramm «Nubian»' };  
  
 myImages[9] = { 'src' : 'pics/3_1_8.jpg',  
                'dsc' : 'Intertime, Sofaprogramm «10:12 pm»' };  
  
 myImages[10] = { 'src' : 'pics/3_1_9.jpg',  
                'dsc' : 'Sesselentwurf' };  
  
 myImages[11] = { 'src' : 'pics/3_1_10.jpg',  
                'dsc' : 'Stapelbarer Objektstuhl «Zürich»' };  
  
 myImages[12] = { 'src' : 'pics/3_1_11.jpg',  
                'dsc' : 'L&S, Schulmöbelprogramm Tisch und Stuhl' };  
  
 myImages[13] = { 'src' : 'pics/3_1_12.jpg',  
                'dsc' : 'MOX, Tischprogramm «Tube»'};  
  
 myImages[14] = { 'src' : 'pics/3_1_13.jpg',  
                'dsc' : 'MOX, Regalprogramm «Pile»' };  
  
 myImages[15] = { 'src' : 'pics/3_1_14.jpg',  
                'dsc' : 'Tischprototyp «Jahr» aus Massivholz' };  
  
  myImages[16] = { 'src' : 'pics/3_1_15.jpg',  
                'dsc' : 'Detail Tischprototyp «Jahr», Holz aus dem Tösstal' };  
  
 myImages[17] = { 'src' : 'pics/3_1_16.jpg',  
                'dsc' : 'Tischprototyp «Alpen» aus Massivholz' };  
  
 myImages[18] = { 'src' : 'pics/3_1_17.jpg',  
                'dsc' : 'Eckdetail Tischprototyp «Alpen»' };  
  
 myImages[19] = { 'src' : 'pics/3_1_18.jpg',  
                'dsc' : 'Spiegelleuchtenstudie für Bodenschatz' };  
  
 myImages[20] = { 'src' : 'pics/3_1_19.jpg',  
                'dsc' : 'Studie FL-Leuchte mit weißer Abdeckung' };  
  
 myImages[21] = { 'src' : 'pics/3_1_20.jpg',  
                'dsc' : 'Studie FL-Leuchte mit roter Abdeckung' };  
  
 myImages[22] = { 'src' : 'pics/3_1_21.jpg',  
                'dsc' : 'Bodenschatz, Accessoires-Linie «Riva»' };  
  
 myImages[23] = { 'src' : 'pics/3_1_22.jpg',  
                'dsc' : 'Bodenschatz, Armaturen-Linie «Riva»' };  
  
 myImages[24] = { 'src' : 'pics/3_1_23.jpg',  
                'dsc' : 'Bodenschatz, Seifenspender Kollektion «Riva»' };  
  
 myImages[25] = { 'src' : 'pics/3_1_24.jpg',  
                'dsc' : 'Bodenschatz, Badeinrichtung Programm «Riva»' };  
  
 myImages[26] = { 'src' : 'pics/3_1_25.jpg',  
                'dsc' : 'Bodenschatz, Lavaboausstattung «Riva»' };  
  
 myImages[27] = { 'src' : 'pics/3_1_26.jpg',  
                'dsc' : 'Bodenschatz, Wandauslauf Armaturenprogramm «Riva»' };  
  
 myImages[28] = { 'src' : 'pics/3_1_27.jpg',  
                'dsc' : 'Bodenschatz, Relingsystem «Riva»' };  
  
  
  
var maxValue = myImages.length - 1;  
var intValue = 1;  
  
function gallerie(charValue) {  
if(charValue == 'c') {  
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue].src + "'><p>" + myImages[intValue].dsc + "</p>";  
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;  
}  
else if(charValue == '+') {  
if(intValue == maxValue) {  
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[1].src + "'><p>" + myImages[1].dsc + "</p>";  
intValue = 1;  
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;  
}  
else {  
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue + 1].src + "'><p>" + myImages[intValue + 1].dsc + "</p>";  
document.getElementById("zähler").innerHTML = (intValue+1) +"/"+ maxValue;  
intValue = intValue + 1;  
}  
}  
else if(charValue == '-') {  
if(intValue == 1) {  
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[maxValue].src + " + 'link' + 'href'><p>" + myImages[maxValue].dsc + "</p>";  
intValue = maxValue;  
document.getElementById("zähler").innerHTML = intValue +"/"+ maxValue;  
}  
else {  
document.getElementById("imgGallerie").innerHTML = "<img src='" + myImages[intValue - 1].src + "'><p>" + myImages[intValue - 1].dsc + "</p>";  
document.getElementById("zähler").innerHTML = (intValue-1) +"/"+ maxValue;  
intValue = intValue - 1;  
}  
}  
}  
</script>  
<html>  
  
<body onLoad="gallerie('c')">  
  
<div id="logo" ><a href="index.php"><img src="pics/logo.gif" border="0" ></a></div>  
<div id="imgGallerie">  
<map name="#produktgestaltung_Map">  
<area shape="rect" alt="""" coords="35,52,94,69" href="http://www.formpol.ch" target="_blank">  
</map>  
  
</div>  
  
<div id="links"><a href="#" onClick="gallerie('-')"><</a></div>  
<div id="zähler"></div>  
<div id="rechts"><a href="#" onClick="gallerie('+')">></a></div>  
  
</body>  
</html>  
  
<?php include('navigation.inc.php'); ?>  
  
<?php include('footer.inc.php'); ?>

lg
sarah

Beitrag melden

– Informationen zu den Bewertungsregeln

usemap bei dynamisch erstelltem Bild
JürgenB Homepage des Autors 09.11.2007 11:53

javascript
– Informationen zu den Bewertungsregeln
Hallo sarah,

ich habe das jetzt mal selbst getestet (HTML 4.01 strict):
```
  
...  
window.onload=function() {  
 var b = document.createElement("img");  
// var b = new Image();             // wie new Image  
 b.src = "Asteriscus.jpg";  
// b.usemap = "#mymap";             // geht weder im IE noch im FF  
 b.setAttribute("usemap","#mymap"); // geht im FF  
 document.getElementById("bld").appendChild(b);  
}  

~~~~~~html
  
</script>  
</head>  
<body>  
<map name="mymap">  
 <area shape="rect" coords="10,10,50,50" href="#">  
</map>  
<div id="bld">&nbsp;</div>  
...
```
offensichtlich habe ich dich auf die falsche Fährte gelockt. Tut mir leid. ".usemap=" geht garnicht und ".setAttribute" geht im FF, nicht aber im IE.

Gruß, Jürgen
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. usemap bei dynamisch erstelltem Bild
  
  plan_B 09.11.2007 12:32
  
  javascript
  – Informationen zu den Bewertungsregeln
  Hallo,
  var b = document.createElement("img");
  b.src = "Asteriscus.jpg";
  // b.usemap = "#mymap"; // geht weder im IE noch im FF
  b.setAttribute("usemap","#mymap"); // geht im FF
```
  
mal hier gucken: <http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#img>  
  
Gruß plan\_B

-- 
     \*®\*´¯`·.¸¸.·
```
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. usemap bei dynamisch erstelltem Bild
    
    JürgenB Homepage des Autors 09.11.2007 13:07
    
    javascript
    
    – Informationen zu den Bewertungsregeln
    Hallo plan_B,
    
    mal hier gucken: http://de.selfhtml.org/javascript/objekte/htmlelemente.htm#img
    
    usemap -> useMap, böse Falle: großer Buchstabe in der Mitte ohne "-" im Attributnamen.
    
    Gruß, Jürgen
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

sarah: Imagemap und Bildergalerie

Imagemap und Bildergalerie

usemap bei dynamisch erstelltem Bild

Imagemap und Bildergalerie

Imagemap und Bildergalerie

Imagemap und Bildergalerie

Imagemap und Bildergalerie

Imagemap und Bildergalerie

Imagemap und Bildergalerie

Imagemap und Bildergalerie

usemap bei dynamisch erstelltem Bild

usemap bei dynamisch erstelltem Bild

usemap bei dynamisch erstelltem Bild