zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden Imagemap Zugriff bei einer Gallery

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2007, 15:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2007
Beiträge: 13
Sarah14 befindet sich auf einem aufstrebenden Ast
Standard Imagemap Zugriff bei einer Gallery

Hallo!

Da ich mich ja (vielleicht bereits bekannt) mit einer Bildergalerie befasse habe ich gerade folgendes Problem..
Auf dem ersten Bild(.jpg) meiner Galerie gibt's einen LInk(Image Map), den ich per imageMap am besagten Bild bereits vorbereitet habe.

Nun aber das Problem: ICh möchte nur bei diesem einen Bild auf den Link zugreifen können.

Ich habe mir bereits überlegt, den Link einfach über die komplette Galerie zu legen, so ist er zwar immer da, aber nur beim ersten Bild kommt man auf die Idee drauf zu klicken. Find ich aber unsauber.

Meine zweite Idee => Zugriff bzw. Link-Infos über das Array..
Nur, wie mach ich das am besten?
Hat da jemand ne Idee?
Liebe Grüsse
Sarah

Code:
<?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[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' : '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' };
				
 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 + "'><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;
}
}
}


function vorladen1(i) {
if (! myImages[i].img ) {
myImages[i].img = new Image();
myImages[i].img.src = myImages[i].src;
}
}

function vorladen(i) {
var next= i<(maxValue-1) ? (i+1) : 1;
var prev= i>1 ? (i-1) : 1;
vorladen1(next);
vorladen1(prev);
}
</script>
<html>
<body>


<body onLoad="gallerie('c')">
<div id="logo" ><a href="index.php"><img src="pics/logo.gif"></a></div>
<div id="imgGallerie">
<img src="" width="600" height="350" border="0" alt="" usemap="#workshop_Map">
<map name="workshop_Map">
<area shape="rect" alt="""" coords="35,52,94,69" href="mailto:info@abc.ch?subject=Workshop" target="_blank">
</map>


</div>
<div id="links"><a href="#" onClick="gallerie('-')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032"><</font></a></div>
<div id="zähler"></div>
<div id="rechts"><a href="#" onClick="gallerie('+')"><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#420032">></font></a></div>

</body>
</html>

<?php include('navigation.inc.php'); ?>

<?php include('footer.inc.php'); ?>

Geändert von Sarah14 (12.11.2007 um 14:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.11.2007, 10:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2007
Beiträge: 13
Sarah14 befindet sich auf einem aufstrebenden Ast
Ausrufezeichen

Ich habe schon verschiedene Tipps bekommen, doch so richtig funktioniert das noch nicht. Kennt sich damit jemand aus?


Tipp1, im Code der Galerie:
document.getElementById("imgGallerie").innerHTML ="<map><area.....>";
(klappt nicht)

Tipp2
»» »» 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.abc.ch" target="_blank">
»» »» </map>
»» »» </body>
(auch net)

liebe Grüsse
Sarah

Geändert von Sarah14 (12.11.2007 um 14:19 Uhr)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.11.2007, 11:56
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.942
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich finde dein Skript sehr unglücklich, da es alles mögliche doppelt macht und viel überflüssigen Code enthält. Auch dein HTML ist nicht mehr auf der höhe der Zeit, du solltest dich darüber hinaus mit CSS beschäftigen, das macht vieles einfacher.

Ich hab die ganze Sache mal umgeschrieben:
PHP-Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
       "http://www.w3.org/TR/REC-html40/strict.dtd"
>
<
html>
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<
titleGallerie </title>

<
style type="text/css">
#imgGallerie div{
    
cursorpointer;
    
text-decorationunderline;
    
}
#imgGallerie img{
    
border:none;

}
</
style>
<
script type="text/javascript">
function 
ImgObj(srctxtmap) {
    var 
= {};
    
o.src src;
    
o.dsc txt;
    if(
mapo.map '#' map;
    return 
o;
}
var 
myImages = [
ImgObj('pics/produktgestaltung.jpg','&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;''workshop_Map'),
ImgObj('pics/3_1_1.jpg''Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs, Zürich)'),
ImgObj('pics/3_1_2.jpg''Team by Wellis, Sessel «DiDo» (Fotos: Patrik Fuchs Zürich)' ),
ImgObj('pics/3_1_3.jpg''Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs Zürich)' ),
ImgObj('pics/3_1_4.jpg''Team by Wellis, Sessel «DaRa» (Fotos: Patrik Fuchs, Zürich)'),
ImgObj('pics/3_1_5.jpg''Intertime, Sessel «Nubian»'),
ImgObj('pics/3_1_6.jpg''Intertime, Sofaprogramm «Nubian»'),
ImgObj('pics/3_1_7.jpg''Intertime, Sofaprogramm «Nubian»'),
ImgObj('pics/3_1_8.jpg''Intertime, Sofaprogramm «10:12 pm»'),
ImgObj('pics/3_1_9.jpg''Sesselentwurf'),
ImgObj('pics/3_1_10.jpg''Stapelbarer Objektstuhl «Zürich»'),
ImgObj('pics/3_1_11.jpg''L&S, Schulmöbelprogramm Tisch und Stuhl'),
ImgObj('pics/3_1_12.jpg''MOX, Tischprogramm «Tube»'),
ImgObj('pics/3_1_13.jpg''MOX, Regalprogramm «Pile»'),
ImgObj('pics/3_1_14.jpg''Tischprototyp «Jahr» aus Massivholz'),
ImgObj('pics/3_1_15.jpg''Detail Tischprototyp «Jahr», Holz aus dem Tösstal')
];                

var 
maxValue myImages.length 1;
var 
intValue 0;

function 
gallerie(charValue) {
    if(!
charValuecharValue 0;
    
intValue += charValue;
    
    if(
intValue >= myImages.lengthintValue  0;
    else if(
intValue 0intValue myImages.length 1;
    
    var 
document.getElementById("imgGallerie");
    if(!
o) return;
    
    var 
counter document.getElementById("counter");
    var 
img o.getElementsByTagName('img')[0];
    var 
txt o.getElementsByTagName('p')[0];
    
    
img.src myImages[intValue].src;
    
img.useMap myImages[intValue].map;
    
txt.innerHTML myImages[intValue].dsc;
    
counter.innerHTML = ( intValue 1) + '/' + (myImages.length);
    
vorladen(intValue 1);
    
vorladen(intValue 1);
}


function 
vorladen(i) {
    if (
myImages[i] && !myImages[i].img ) {
        
myImages[i].img = new Image();
        
myImages[i].img.src myImages[i].src;
    }
}
window.onload = function() { gallerie(); };
</script>

</head><body>

<map name="workshop_Map">
<area shape="rect" alt="" coords="0,0,94,69" href="mailto:info@hanspeterwirth.ch?subject=Workshop">
</map>

<div id="imgGallerie">
<img src="#" width="600" height="350" alt="">
<p>[Text]</p>
<div onclick="gallerie(-1)">&lt;</div>
<div id="counter"></div>
<div onclick="gallerie(+1)">&gt;</div>
</div>

</body>
</html> 
Mit Zitat antworten
  #4 (permalink)  
Alt 12.11.2007, 14:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 30.10.2007
Beiträge: 13
Sarah14 befindet sich auf einem aufstrebenden Ast
Daumen hoch YO

Okay, ich würd mal sagen, durch die Tatsache, dass ich vor 2 Wochen noch nicht mal wusste was Javascript überhaupt ist, hab ich das schon ganz ordentlich hinbekommen..

Aber hey: Hut ab!! Vielen Vielen Dank!

Ich hab mir schon gedacht, dass mein Text zu lang und zu doppeltgemoppelt ist, aber wie soll man das verbessern, als one-women-show-lern-einheit?

*frohlockend singend*

liebe Grüsse
Sarah
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Profifrage: Imagemap auf div mit background-image? freejay (X)HTML 1 12.03.2011 13:04
css gallerie Problem papers00 CSS 0 10.03.2010 13:43
Area und CSS - Tooltip in Imagemap mit CSS poppaea (X)HTML 6 03.04.2009 18:14
Bilder aus image gallery mit Bildüberschrift - nur wie? fossy CSS 0 05.11.2008 16:17


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:08 Uhr.