Image map mouse over weigert in Google Chrome

[yammaski]

Ik heb in DreamWeaver een page gemaakt met enkele mouse-over's en een image map.
Alles werkt, behalve in Google Chrome. Hier blijkt iets verkeerd te zijn met de hotspots van de image map.
Het is wat ingewikkeld om het zo uit te leggen, dus hier de link en kan je naar de broncode kijken als je wil. Je moet het wel in Chrome bekijken om het probleem te zien !
http://users.telenet.be/gepo/X_Tests/mouse_over.html
Het is de bedoeling dat het zwarte gedeelte verdwijnt als je er met de muis overkomt. Dan zie je een kleurenwaaier. Als je op een kleur gaat staan, verschijnt rechtsboven de kikker in die bepaalde kleur met de naam. Zò zou het toch moeten, maar in Chrome lukt het niet !

 

[csshunter]

Ha, wat een leuk ding!
Bij het bezichtigen van de code valt me op dat de <a> voor de swap om de area's heen zit. Maar die area's zijn zelf ook "hoverable", en net als een link binnen een link lijkt me dat niet (goed) te kunnen. De html-validator struikelt er niet over, maar html-Tidy wel.
Als je dat er uit fietst, doet Chrome het dan wel?

Met vriendelijke groet,
CSShunter

[edit]Ook Safari weigert dienst, zie ik nu[/edit]

PS:
Ik zie dat elke gekleurde kikker een pittig bestand is van zo'n 125 kB. Dat geeft nogal wat vertraging als je over het palet heen muist: elke keer moet zo'n image opgevraagd worden en gedownload van de server. In eerste instantie zag ik daardoor niet hoe het werkte, want op een ring gaan staan gaf geen onmiddellijke reactie.
Nu denk ik dat het wel behoorlijk versneld kan worden:

• Eén image maken: een strook met alle kleuren kikkers achter elkaar, en de witte ( = alleen de oogjes) voorop. Dus alleen de rechterbovenhoek.
• Even geprobeerd: 1 kikker = 5,5kB bij een jpg met 15% compressie. > Dus de 28 kleuren zijn samen (minder dan) ca. 150kB.
• Een <div ="kikker"> maken ter grootte van 1 kikker, en deze in de rechterbovenhoek positioneren.
• In die <div> de kikker-strook monteren als background-image.
• Via de area-onmouseover's de background-position telkens opschuiven naar de juiste kikker.
• Dan wordt de strook 1 keer gedownload naar de bezoeker (alleen de eerste keer wat vertraging), en krijgt het hoveren over de kleuren vervolgens een instant-effect in de kikkerkleur.
• Als je de strook ook ergens opneemt in een "hidden div" met { position: absolute; left: 0; margin-left: -9999px; }, dan wordt de strook alvast binnengehaald bij de bezoeker terwijl deze de rest van de pagina bekijkt en met de muis op weg gaat. > Dan zal er de eerste keer ook geen vertraging zijn, gok ik.

 

[yammaski]

en net als een link binnen een link

Dat is nu juist waar ik op zoek naar ben, om zoiets klaar te krijgen. Dat is enkel de zwarte image als je de page load die swapt naar de image met de hotspots.
Maar die <a href="#"> ... </a> kan niet anders geplaatst worden !

Wat betreft de grootte van de jpg's ...
* ik heb de images veranderd zodat bij elke kleurkikker met naam een GIF is met transp. bg
* de map is nu 400 Kb ipv 3,8 Mb ! Minder kan ik niet omdat dan de RGB waarden veranderen, en daar gaat het toch om.
http://users.telenet.be/gepo/X_Tests/mouse_over_div.html

Dit zal wel werken (tot hier toe) in alle browsers !? Kijk eens voor Safari als je wil, Chrome werkt.

Die andere swap (zwarte) moet ik nog proberen, die zit in deze link nog niet in.

 

[csshunter]

Ja, dat scheelt een slok op een borrel! De kikkerkleuren vliegen nu als een razende voorbij.
En in Safari doet ie het ook goed (valid code > Safari o.k.).

Over de zwarte swap zal ik nog eens nadenken. Het zou moeten kunnen, toch?

Met vriendelijke groet,
CSShunter

 

[yammaski]

Kan ik dat niet met een "redirect page" doen ? (ik werk met asp vb)
Als je in IE6, Chrome of Safari op de link klikt om op de "kikker-page" te komen wordt je (onmerkbaar als surfer) doorverwezen naar de "kikker-page" zònder zwarte swap.
Anders naar de page mèt swap.
Dit moet toch te doen zijn als je met een script de useragent kan ophalen !?

Deze link zou voor alle browsers moeten werken. Ik heb het met een "redirect" gemaakt.
http://www.frogstyling.be/X_Tests/ServerVariables.asp