map gebruiken voor verschillende links in foto

Status
Niet open voor verdere reacties.
B

bram2

Gebruiker
Lid geworden
23 nov 2006
Berichten
80
Ik gebruik nu onderstaande code om een mouseover effect te creëren. Afhankelijk van de plaats in de foto moet een andere tekst weergegeven worden in een ander kadertje (zit in funtie changeImage ).

Onderstaande code werkt perfect bij 1 bepaalde resolutie, maar als de resolutie verandert schalen de coördinaten van de circle niet mee. De breedte van myimage moet meeschalen met de resolutie om layout redenen, ik zou dus graag iets doen in de aard van coords="50%,30%,10%" maar dit is niet toegelaten.

Iemand een oplossing voor dit probleem?

Code: 
<img id="myimage" src="1.png"  width="70%"   usemap="#mymap">   
<map name ="mymap"> 
<area shape="circle" coords="438,40,50" onmouseover="changeImage('1')">
<area shape="circle" coords="342,130,50" onmouseover="changeImage('2')">
......
</map>
 
Hoi bram2,
Hé, in de html-specificatie staat onder "Client-side image maps" (www.w3.org/TR/html401/struct/objects.html#h-13.6.1):
  • coords = coordinates
    Coordinates are relative to the top, left corner of the object. All values are lengths.
Ga je vervolgens via die link kijken hoe de definitie van "length" precies is, dan staat daar:
  • Length: The value (%Length; in the DTD) may be either a %Pixel; or a percentage of the available horizontal or vertical space.
Maar ik geloof dat browsers niet zo van percentages in image maps houden. Een Google op "image map percentage problem" geeft nogal wat resultaten... In de tweede hit staat onder "Creating areas":
  • "No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates."
Dat geeft niet veel hoop! :confused:

Ik denk daarom dat er wat javascript aan te pas zal moeten komen om on-the-fly de percentages om te zetten in harde pixels.
Iets als:
  • Eerst tekeningetje maken met de percentages waar de lengte en breedte van een bepaald item uithangt t.o.v. de linkerbovenhoek van het "myimage", en ook hoe groot de straal in verhouding moet zijn.
  • Javascript na het inladen van de pagina de werkelijke breedte van het "myimage" in de browser van de bezoeker laten opvragen.
  • Javascript aan de hand van de getraceerde werkelijke breedte de percentages laten omzetten in echte pixels.
  • En tenslotte javascript de gevonden pixel-waarden snel in de html laten zetten. :)
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
csshunter zei:
Hoi bram2,
Hé, in de html-specificatie staat onder "Client-side image maps" (www.w3.org/TR/html401/struct/objects.html#h-13.6.1):
  • coords = coordinates
    Coordinates are relative to the top, left corner of the object. All values are lengths.
Ga je vervolgens via die link kijken hoe de definitie van "length" precies is, dan staat daar:
  • Length: The value (%Length; in the DTD) may be either a %Pixel; or a percentage of the available horizontal or vertical space.
Maar ik geloof dat browsers niet zo van percentages in image maps houden. Een Google op "image map percentage problem" geeft nogal wat resultaten... In de tweede hit staat onder "Creating areas":
  • "No major browsers understand percentage coordinates correctly, and all interpret percentage coordinates as pixel coordinates."
Dat geeft niet veel hoop! :confused:

Ik denk daarom dat er wat javascript aan te pas zal moeten komen om on-the-fly de percentages om te zetten in harde pixels.
Iets als:
  • Eerst tekeningetje maken met de percentages waar de lengte en breedte van een bepaald item uithangt t.o.v. de linkerbovenhoek van het "myimage", en ook hoe groot de straal in verhouding moet zijn.
  • Javascript na het inladen van de pagina de werkelijke breedte van het "myimage" in de browser van de bezoeker laten opvragen.
  • Javascript aan de hand van de getraceerde werkelijke breedte de percentages laten omzetten in echte pixels.
  • En tenslotte javascript de gevonden pixel-waarden snel in de html laten zetten. :)
Met vriendelijke groet,
CSShunter
Klik om te vergroten...

Is een oplossing, maar heb dit echt nooit nodig gehad.
@TS zou je de complete code kunnen bijvoegen in een zip bestand, zou toch graag even spelen met het geheel om te zien wat er precies gebeurd.
 
Ja, het hangt inderdaad erg van het concrete geval af.
Ik stel me het probleem als volgt voor:
  • Het "myimg" is bv. een kaart, waarop een aantal steden zijn ge-imagemapt, zodat je die kunt aanklikken.
  • Als de resolutie verandert, moet de kaart meeschalen. En dus ook de positie van de image-maps.
  • Hoe moet je dat doen, als je geen % kan gebruiken voor de img-map posities?
(a) met javascript, of (b) met een alternatieve oplossing. ;)

nl-1024x768.png
nl-1280x1024.png

Alternatieve oplossing zonder javascript
  • Als nu de steden niet heel erg dicht op elkaar liggen, kan je het image-map systeem vervangen door een serie <a>'s die over de kaart heen geplakt worden (met een <div> exact zo groot als de kaart; die div kan dus dezelfde %'s als de kaart meekrijgen), zodat je daar op kunt klikken.
  • De <a>'s zelf kan je ook positioneren met een % van de afstand tot de linkerbovenhoek van de div/kaart, en qua positie dus laten meeschalen.
  • Gratis extra voordeel: je kunt een css-hover aan de <a>'s vastplakken, wat niet gaat met een img-map.
Nu is er hier extra speling nodig t.o.v. een img-map systeem met een cirkelvormig oppervlak:
  • De <a>'s zijn rechthoekig!
  • De <a>'s mogen elkaar dan niet op kritische punten overlappen (d.w.z. op hoekpunten naast de cirkels).
  • Je zit nog met de grootte van de <a>'s, die niet via css kan meeschalen.
Maar als er genoeg speling is, kan het helemaal met css opgelost worden en hoeft er helemaal geen javascript aan te pas te komen.
En er kan best heel veel, zie dit voorbeeld:
Dus ik ben net als grumbkow best wel nieuwsgierig naar wat het precies moet worden! :)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Ik zie nu pas het probleem. De kaarten die ik tot dusver heb gemaakt pasten altijd nog in een 800x600 resolutie waardoor hij nooit geschaald hoefde te worden.
 
Project heeft effe stillgelegen, maar heb mijn probleem ondertussen opgelost dankzij de tips van csshunter.

Code: 
<img id="image2" src="1.png"  width="100%"  usemap="#treemap">   
				<map name ="treemap"> 
					<area shape="circle" id="map1"    coords="0,0,0" onmouseover="changeImage('1')">
					<area shape="circle" id="map2"    coords="0,0,0" onmouseover="changeImage('2')">
                                         ......
				</map> 
<script type="text/javascript">
          calculateImageMap();
</script>


Code: 
//calculateImageMap wordt aangeroepen bij laden pagina en bij resizen van browser
function calculateImageMap(){
	var myImage = document.getElementById("image2");
	var myWidth = myImage.width;
	var myHeight = myImage.height;
	document.getElementById("map1").coords    = myWidth * 0.529 +"," + myHeight * 0.142 +"," +myWidth/20;
	document.getElementById("map2").coords    = myWidth * 0.410 +"," + myHeight * 0.486 +"," +myWidth/20;
        ......
}
 
Laatst bewerkt:
Ja, dat is het achteraf altijd, dan lijkt het zéér logisch. Maar kom er maar eens achter! *) ;)

Groetjes,
CSShunter
______
*) Ik moest m'n hersenpan ook even stevig laten kraken voor ik het ei van Columbus opeens zag staan.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan