image maps, andere afbeeling bij mouseover

[Verwijderd]

Ik ben bezig om 1 grote afbeeling te verdelen in links met image maps.
Ik heb verschillende versies van deze grote afbeelding en wat ik graag zou willen is het volgende:

Als ik met de muis over een link ga dan moet de afbeelding veranderen.

Dit is mijn code nu:

code:

<img src="images/1.jpg" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="370,173,536,324" href="test1.php" />
<area shape="rect" coords="549,174,716,324" href="test2.php" />
<area shape="rect" coords="730,174,897,325" href="test3.php" />
</map>

Als ik dus met de muis over de eerste link ga die naar test1.php linkt, dan moet 1.jpg veranderen in 2.jpg.

Alvast bedankt.

[ Voor 4% gewijzigd door Verwijderd op 05-05-2007 16:34 . Reden: typo ]

[Geert.H]

kan je doen mbv CSS, en dan is het woord waar je op moet zoeken: hover. Dit werkt in IE echter alleen met A, dus daar zal je dan een 'hack' voor moeten verzinnen.

Ook kan dit natuurlijk met javascript en dat soort meuk. Maar wat heb je zelf al zoal geprobeerd?

[ Voor 13% gewijzigd door Geert.H op 05-05-2007 16:35 ]

[Rowanov]

Javascript is een mogelijke oplossing; de volgende website geeft een goed voorbeeld:
Uitleg: http://www.onlinetools.or...ejavascript/chapter2.html
Voorbeeld: http://www.onlinetools.or...ascript/ex_rollover2.html

[Verwijderd]

Rowanov schreef op zaterdag 05 mei 2007 @ 16:40:
Javascript is een mogelijke oplossing; de volgende website geeft een goed voorbeeld:
Uitleg: http://www.onlinetools.or...ejavascript/chapter2.html
Voorbeeld: http://www.onlinetools.or...ascript/ex_rollover2.html

ik zal er morgen eens naar kijken.

bedankt.

[crisp]

Geert.H schreef op zaterdag 05 mei 2007 @ 16:35:
kan je doen mbv CSS, en dan is het woord waar je op moet zoeken: hover. Dit werkt in IE echter alleen met A, dus daar zal je dan een 'hack' voor moeten verzinnen.

Hoe wou je dat doen met CSS? Je MAP/AREA element heeft geen relatie tot de IMG die je met een selector kan aangeven in CSS. De enige mogelijkheid is een imageswap doen met javascript op onmouseover van het AREA element.

[Keeper]

Je zou dit kunnen gebruiken: http://www.alistapart.com/articles/sprites/

Heb ook nog een andere methode hiervoor gezien laast op alistapart, maar kan die nu even niet vinden.

[Geert.H]

crisp schreef op zondag 06 mei 2007 @ 12:43:
[...]
Hoe wou je dat doen met CSS? Je MAP/AREA element heeft geen relatie tot de IMG die je met een selector kan aangeven in CSS. De enige mogelijkheid is een imageswap doen met javascript op onmouseover van het AREA element.

Mwah, ik realiseer me nu ook dat het niet echt een oplossing was. Maar het idee dat ik had was om die hele imagemaps weg te gooien, de afbeelding te slicen, en die telkens te laten veranderen. Maar aangezien het niet nette vierkantjes zijn, gaat dat niet lukken.

[Verwijderd]

Ik heb nog ff liggen googlen en ben dit:
http://www.omegagrafix.com/mouseover/mousimap.html
tegengekomen. Precies wat ik zocht.

Ik ga nu ff met die code aan de slag.

--
Het is inmiddels gelukt met hulp van bovenstaande link.
Voor de geintereseerde:
http://www.maxcim.nl/test

Toch bedankt.

[ Voor 36% gewijzigd door Verwijderd op 06-05-2007 20:57 ]

[Rowanov]

De link die ik je gaf doet in feite hetzelfde, is het niet dat het daar op een unobtrusive manier wordt uitgevoerd. Ik zou zelf de oplossing die je aandraagt nooit gebruiken

[Geert.H]

Je voorbeeld is ook prima mogelijk met css, maar nu weet ik zelf eigenlijk niet wat netter is in dit geval. CSS of Javascript.

[Cadezo]

Verwijderd schreef op zondag 06 mei 2007 @ 20:29:
--
Het is inmiddels gelukt met hulp van bovenstaande link.
Voor de geintereseerde:
http://www.maxcim.nl/test

Toch bedankt.

je weet dat 'computers' standaard oranje is en als je er over heen gaat zwart wordt? ik gebruik IE7

[Verwijderd]

cdezoete schreef op maandag 07 mei 2007 @ 13:02:
[...]


je weet dat 'computers' standaard oranje is en als je er over heen gaat zwart wordt? ik gebruik IE7

Yep, dat is ook de bedoeling.
Toch bedankt voor het meedenken.

Maxcim

[RobIII]

Ik vind het zowieso nogal overkill om daar 1 grote JPG voor te gebruiken en die te vervangen door een andere terwijl er (relatief gezien) weinig verandert. Ik zou de blokjes 'los snijden' en daar losse afbeeldingen (GIF of PNG) voor gebruiken. JPG is zowieso voor dit doeleinde te 'brak' tenzij je amper compressie toepast; dan is een GIF/PNG een stuk rendabeler.

Als je er losse blokjes van maakt kun je met een stukkie JS ook prima alleen de losse blokjes vervangen zonder die hele ('enorme') afbeelding opnieuw te hoeven laden.

[ Voor 18% gewijzigd door RobIII op 07-05-2007 16:33 ]

[Verwijderd]

RobIII schreef op maandag 07 mei 2007 @ 16:33:
Ik vind het zowieso nogal overkill om daar 1 grote JPG voor te gebruiken en die te vervangen door een andere terwijl er (relatief gezien) weinig verandert. Ik zou de blokjes 'los snijden' en daar losse afbeeldingen (GIF of PNG) voor gebruiken. JPG is zowieso voor dit doeleinde te 'brak' tenzij je amper compressie toepast; dan is een GIF/PNG een stuk rendabeler.

Als je er losse blokjes van maakt kun je met een stukkie JS ook prima alleen de losse blokjes vervangen zonder die hele ('enorme') afbeelding opnieuw te hoeven laden.

Ik zal het in overweging nemen, thx