Als je afbeelding1.jpg 313 bij 313px is, en in de html als 100x100px getoond wordt, zou ik dat plaatje met een tekenprogramma verkleinen tot 100x100px, en daarna weer uploaden. Dat geeft een beter resultaat dan wanneer de browser de 313x313 afbeelding gaat verkleinen tot de 100x100 die op het scherm moet komen.
- Maar dat was niet de hoofdvraag.
De "css-pop up methode" van de voorbeelden is ook toepasbaar op afbeelding1.jpg, als die bij een mouseOver afbeelding2.jpg van 500x500 moet worden. Alleen moet de code daarvoor wat aangepast worden.
- Bij een andere vraag heb ik pas uitgelegd hoe het in z'n werk gaat. Kijk hier maar eens. Met voorbeeld!
Als de basis je afbeelding van 100x100 moet zijn, dan moet die in een link gezet worden, en de andere afbeelding (van 500x500) moet opgenomen worden in de <span> binnen die link.
Dit is dus helemaal scriptloos! De mouseOver wordt gerealiseerd omdat de hover door de css gezien kan worden, en de css dan de hover-style kan veranderen. Omdat de <span> binnen de link zit waarover gehoverd wordt, kan op deze manier de margin van de afbeelding veranderd worden van -9999px (d.w.z. buiten beeld!) naar de horizontale positie waar je 'm wilt hebben.
Je zou er ook nog iets van javascript bij kunnen doen: niet voor het mouseOveren zelf, maar om de rest van de pagina wat meer naar achteren te drukken. Je kan met javascript namelijk de style van een willekeurig element van de pagina veranderen, als dat element maar een ID heeft gekregen. Als je de <body> een ID geeft, kan je de body-styles aanpassen: bijvoorbeeld de achtergrond en de tekstkleur laten vergrijzen. Als de mouseOver beëindigd is, wordt dan tegelijkertijd de rest van de pagina weer gewoon zwart-wit.
Als er andere elementen op de pagina staan met een eigen kleur, kan dit moeiteloos toegevoegd worden. Als ze maar weer een ID gekregen hebben.
- En heeft iemand toevallig of niet toevallig javascript op z'n/h'r browser uit hebben staan, dan is er geen man/vrouw overboord. Alleen het vergrijzen valt dan weg. De hover met het grotere plaatje blijft het gewoon doen.
Meestal zijn met html/css/javascript meerdere oplossingen voor hetzelfde probleem mogelijk. Het zou ook nog op andere manieren kunnen. Dat kan bv. nodig zijn als je binnen het grote plaatje een gedeelte hebt wat je moet kunnen aanklikken. Dan werkt de css pop-up methode niet, want je kan geen link binnen een link hebben!
... maar was dit wat je bedoelde?
Met vriendelijke groet,
CSShunter
