rollover compilatie

Status
Niet open voor verdere reacties.
T

Thomaszz85

Gebruiker
Lid geworden
23 mrt 2010
Berichten
166
Beste,

Ik wil graag het volgende, maar ik weet niet hoe.Een plaatje met meerdere rollovers. Dus als je linksboven klikt, licht dat deel op en ga je naar pagina A, en als je rechtsboven klikt ga je naar pagina B enzo. Het zijn ook geen mooie passende stukken, maar grote en kleine. Het is wel een geheel.

Hoe kan ik dit het beste maken ?

Alvast bedankt!

Groetjes
Thomas
 
Hoi Thomaszz85,
Die vraag is alweer van even geleden! ;)
Ik denk dat je het 't beste kan doen met 1 totaalplaatje en verschillende hover-plaatjes, die je in de html construeert met een zogenaamde "image-map".
De links kan je maken met het <map> element en verschillende <area> elementen.
Het hover-plaatje kan je regelen met een a:hover in de css.
Met vriendelijke groet,
CSShunter
 
Hoi, bedankt voor het antwoord. Momenteel heb ik t met Studio Webdesign gemaakt (zie hier). Volgens mij op dezelfde manier. Hoe dit in Dreamweaver moet zal ik nog even uit moeten vogelen. Bedankt!
 
Juistem! Die Studio Webdesign heeft er wel een bende van gemaakt: alles absoluut gepositioneerd, de css inline tussen de html, en een vreselijke bulk aan javascript. Foei!
Bij nader inzien heb ik een andere suggestie dan het gebruik van een image-map.
  • Het <area> element kan wel in theorie, maar niet in de browser-praktijk bij hoveren van achtergrond wisselen met css. Tenminste niet met css alleen: daar moet inderdaad javascript aan te pas komen. Dat zit ook in mijn bovengenoemde voorbeeld (maar dan wel beter dan dat van Studio Webdesign).
  • Maar jouw indeling van de plaatjes maakt het heel goed mogelijk het zonder het <area> element te stellen. Het kan ook met gewone links die een achtergrond-hover hebben.
  • Dan zet je het totaal-plaatje er als achtergrond-img in, zodat de plaatjes van de achtergrond-hover van de links erboven komen te liggen. Hiermee ben je van alle javascript af. De css kan in het stylesheet, en de html is prettig simpel geworden:
Code: 
#plaatje {
	width: 815px;
	height: 543px;
	margin: 0 auto;
	background: url(http://developerscorner.nl/csshunter/tests/images/kasteel-totaal.jpg);
	}
#vleugel-1 {
	width: 320px;
	height: 260px;
	display: block;
	position: absolute;
	margin-left: 70px;
	margin-top: 207px;
	}
#vleugel-1:hover {
	background: url(http://developerscorner.nl/csshunter/tests/images/hover-vleugel1-320x260.gif);
	}
enz.
HTML: 
<div id="plaatje">
	<a id="vleugel-4" title="Vleugel-4" href="vleugel-4.htm"></a>
	<a id="vleugel-3" title="Vleugel-3" href="vleugel-3.htm"></a>
	<a id="vleugel-2" title="Vleugel-2" href="vleugel-2.htm"></a>
	<a id="vleugel-1" title="Vleugel-1" href="vleugel-1.htm"></a>
</div>
Testpagina met alleen de 4 vleugels (de rest gaat op dezelfde manier):
Dit is tenminste valid html, valid css, en werkt in Firefox, Opera, Safari, en jawel ... zelfs in IE6.
Het is even rangeren om de hoverplaatjes op de juiste plek te krijgen. En voor gebruik met Dreamweaver: de css in je stylesheet inplakken, en de html-regeltjes er inplakken in code-weergave. Klaar!

Succes!
Met vriendelijke groet,
CSShunter

PS: Gebruik geen spaties in bestandsnamen; tussen woorden kan je beter een streepje - of onderstreepje _ zetten.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan