Probleem met imagemaps/hotspots in Dreamweaver CS3

StoffelXYZ

topic starter

281

Probleem met imagemaps/hotspots in Dreamweaver CS3

22 mei 2008 - 20:46

geplaatst door: StoffelXYZ

Hoi,

Ik wil d.m.v. een imagemap en hotspots de cirkels aan de linkerkant als voor navigatie gebruiken (zie: http://www.antwerpsmash.net .

Ik tracht de website aan te passen zodat hij met DIV en CSS is opgebouwd.

http://www.lcns.be/testsite

De code van de template ziet er momenteel als volgt uit:

Code: [Selecteer]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>template</title>
<!-- TemplateEndEditable -->
<style type="text/css"> 
<!-- 
body  {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #666666;
margin: 0; /* het is een goede gewoonte om de instellingen voor margin (marge) en padding (opvulling) van het element body op nul in te stellen en daarmee op de standaardinstellingen van de verschillende browsers */
padding: 0;
text-align: center; /* hiermee centreert u de container (het hoofdobject) in IE 5*-browsers Vervolgens wordt de tekst ingesteld op de standaardinstelling van links uitlijnen in de kiezer #container */
color: #000000;
/* background-image: url(); */
}
.thrColFixHdr #container {
width: 920px;
height: 618px;
margin: 0 auto; /* de automatische marges (d.m.v. auto), in combinatie met een breedte, centreren de pagina */
text-align: left; /* hiermee wordt de instelling text-align: center voor het element body genegeerd. */
background-image: url(websitemenufullsponsors.jpg);
background-repeat: no-repeat;
background-position: left;
display: block;
} 
.thrColFixHdr #header { 

padding: 0 10px 0 20px;  /* deze instelling voor padding (opvulling) komt overeen met de uitlijning links van de elementen binnen de div-elementen, die volgen op deze padding. Als een afbeelding wordt gebruikt in de #header in plaats van tekst, wilt u wellicht de padding (opvulling) verwijderen. */
} 
.thrColFixHdr #header h1 {
margin: 0; /* door de marge van het laatste element in het element div voor #header op 0 in te stellen voorkomt u het wegvallen van marges  een onverklaarbare ruimte tussen div-elementen. Als om het element div een rand loopt, is dit niet nodig aangezien dit tevens het wegvallen van de marge voorkomt */
padding: 10px 0; /* door het gebruik van padding (opvulling) in plaats van een marge (via het element margin) kunt u het element van de randen van het element div vandaan houden */
height: 90px;
}
.thrColFixHdr #sidebar1 {
float: left; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 190px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 470px;
}
.thrColFixHdr #sidebar2 {
float: right; /* aangezien dit een zwevend element betreft, moet er een breedte worden opgegeven */
width: 110px; /* met een waarde voor padding houdt u de inhoud van het element div van de randen vandaan */
height: 470px;
}
.thrColFixHdr #mainContent {
margin: 100 0px;
height: 470px;
width: 800px;
} 
.thrColFixHdr #footer {
padding: 0 20px 0 20px;
} 
.thrColFixHdr #footer p {
margin: 0; /* door het gebruik van padding (opvulling) voor dit element maakt u ruimte (op dezelfde manier als door middel van een marge), zonder het probleem van wegvallende marges */
padding-top: 0
px;
padding-right: 0;
padding-bottom: 0px;
padding-left: 0;
clear:both;
}
.fltrt { /* dit exemplaar van class kan worden gebruikt om een element aan de rechterzijde van uw pagina te laten zweven. Het zwevende element moet voorafgaan aan het element dat, op de pagina, naast het zwevende element moet staan. */
float: right;
margin-left: 8px;
}
.fltlft { /* dit exemplaar van class kan worden gebruikt om een element aan de linkerzijde van uw pagina te laten zweven. */
float: left;
margin-right: 8px;
}
.clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt een zwevend object volledig dient te bevatten */
clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
--> 
</style><!--[if IE 5]>
<style type="text/css"> 
/* plaats in deze voorwaardelijke opmerking op het vakmodel gebaseerde css-correcties voor alle versies van IE 5* */
.thrColFixHdr #sidebar1 { width: 180px; }
.thrColFixHdr #sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css"> 
/* plaats in deze voorwaardelijke opmerking css-correcties voor alle versies van IE */
.thrColFixHdr #sidebar2, .thrColFixHdr #sidebar1 { padding-top: 30px; }
.thrColFixHdr #mainContent { zoom: 1; }
/* de bovenstaande softwaregebonden eigenschap zoom geeft IE de hasLayout die IE nodig heeft om verschillende bugs te vermijden */
</style>
<![endif]-->
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head><body class="thrColFixHdr">
<div id="container">
<!-- end #header --></div>
  <div id="sidebar1">

</div> <div id="sidebar2"> </div>  <div id="mainContent">  </div>  <br class="clearfloat" /> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>

Ik slaag er niet in om aan de background-image van de DIV "container" de benodigde imagemap te koppelen/hotspots aan te maken.

Ik heb dan bij wijze van test geprobeerd om "background-image: url(websitemenufullsponsors.jpg);" te vervangen door de code van de versie zonder CSS/DIV, namelijk:

Code: [Selecteer]

<img src="../websitemenufullsponsors3.jpg" width="920" height="618" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area shape="circle" coords="104,494,77" href="shop.htm" />
<area shape="circle" coords="117,411,63" href="offerte.htm" /><area shape="circle" coords="74,353,40" href="links.htm" /><area shape="circle" coords="126,321,48" href="contact.htm" /><area shape="circle" coords="81,282,38" href="wedstrijd.htm" /><area shape="circle" coords="126,244,30" href="galerij.htm" />
<area shape="circle" coords="76,223,49" href="referenties.htm" />
<area shape="circle" coords="109,184,31" href="wieiswie.htm" />
<area shape="circle" coords="79,155,25" href="Index.htm" />

<area shape="circle" coords="88,156,22" href="#" alt="Home" /> <area shape="circle" coords="81,155,2" href="#" target="_self" alt="Home" /> </map>

Deze code heb ik in de DIV container geplaatst.

Dit werkt echter niet. De afbeelding bedekt dan alles.

Kent er iemand de oplossing aub?

Dank bij voorbaat.

Groetjes,

Stoffel

(Bewerkt door StoffelXYZ om 10:30, 23-05-2008)

StoffelXYZ

topic starter

281

Probleem met imagemaps/hotspots in Dreamweaver CS3

23 mei 2008 - 10:31 reactie #1

geplaatst door: StoffelXYZ

Iemand

?

Dank bij voorbaat.

mvdg

7.350

Probleem met imagemaps/hotspots in Dreamweaver CS3

23 mei 2008 - 10:39 reactie #2

geplaatst door: mvdg

Hoi,

Voor zover ik weet is het niet mogelijk om een map toe te kennen aan een afbeelding die met css als achtergrond is ingesteld. Je moet het zo zien, dat een map een html gebeuren is. Je html document heeft als het ware geen weet van wat er als achtergrond is ingesteld. Die twee zijn niet zomaar te verbinden. Of misschien nog wat specifieker gezegd: binnen de html DOM (document opbouw) kun je wel de DIV aanspreken maar niet het plaatje dat als achtergrond van een DIV functioneert.
De css methode zal dus niet gaan werken voor een image map.

Ik weet niet precies waarom een map over al het andere heen zou vallen, maar voor het gevoel zit er wel logica in: als een map ergens achter ligt kun je er immers ook niet goed op klikken.

Volgens mij moet je de oplossing hierin zoeken:
Laat de achtergrond in css staan en maak een losse map, die alleen het linker gedeelte (dus het eigenlijke menu) bevat. Die map plaats je in een aparte div, over de rest van de site heen.
Je kunt dan nog 2 opties bedenken: 1) je kunt als map image een transparant plaatje gebruiken. Je klikt dan dus op het transparante map plaatje maar ja, die is doorzichtig dus je ziet de achtergrond er toch doorheen. Of 2) je laat het linkerdeel van de achtergrond leeg en plaatst een nieuw map-plaatje eroverheen.

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl

mvdg

7.350

Probleem met imagemaps/hotspots in Dreamweaver CS3

23 mei 2008 - 10:41 reactie #3

geplaatst door: mvdg

Overigens, als je een site opbouwt op de manier zoals jij doet (eigenlijk meer op een grafische manier dan een programmeer manier, als ik het zo mag zeggen) misschien zou je je site dan beter in Flash opbouwen. Dan heb je meer vrijheid, je kunt de ballen/ballonnen ook nog laten bewegen enzovoort. Dat lijkt me eigenlijk geschikter voor jouw manier van werken. (Maar neem me niet kwalijk als ik het verkeerd inschat, ik ken je natuurlijk niet).

Mitch Design : websites en interactieve toepassingen : http://www.mitchdesign.nl