Deze tutorial is bedoelt voor mensen met enige kennis van (x)html en css.
Het resultaat is getest en werkt op: Internet Explorer 6 & 7, Firefox 3, Opera, Safari en Google Chrome. Het effect dat ik ga beschrijven noem ik ‘replace’, omdat ik er geen andere naam voor kon vinden.


Rolover effect: replace
De rede waarvoor je het nodig hebt kan erg verschillen. Voor portfolio’s staat het erg mooi, op adult-websites kan je er een waarschuwing in tonen, en anders kan je er wel gewoon info inzetten.

Waar ik het nou over heb is het volgende. Een afbeelding die verandert in een <span> met daarin tekst als je er overheen gaat met je muis.

Een voorbeeld hiervan kan je hier bekijken.


Laten we met de (x)html beginnen.

We hebben als eerst een centrale <div> nodig. Deze <div> is vooral handig om het effect de juiste plek te geven in je website. We geven deze <div> een class mee zodat je dit effect vaker dan een keer per pagina kan gebruiken. In deze tutorial noemen we deze class ‘demo’.

Resultaat:

Code:

<div class="demo"> </div>

Vervolgens hebben we een link nodig, zonder <a> tag immers ook geen hover.
Met deze link hoeven we niets bijzonders te doen. Wanneer je niet wilt dat de link naar een pagina doorlinkt kan je in plaats van een url een hekje (#) neerzetten.

Resultaat:

Code:

<div class="demo">
   
  <a href="#"></a>
   
  </div>

Omdat we dit effect bij een afbeelding toepassen hebben we ook een afbeelding nodig. Ook bij deze afbeelding hoeven we niets bijzonders te doen. In plaats van een afbeelding zou je ook een <div> kunnen gebruiken met daarin bijvoorbeeld tekst. Let wel op dat een <div> in een link niet xhtml valid is.

Resultaat:

Code:

<div class="demo">
   
  <a href="#">
              
              <img src="voorbeeld.jpg" alt= "voorbeeld afbeelding" /> 
   
  </a>
   
  </div>

Om het juiste effect te creëren hebben we ook nog een <span> nodig. We maken express geen gebruik van <div> aangezien dat niet xhtml valid zou zijn. We geven deze span een class met de naam ‘effect’. Dat doen we zodat we meerdere <span> tags kunnen gebruiken om later ons effect vorm te geven.

Resultaat:

Code:

<div class="demo">
   
  <a href="#">
              
              <img src="voorbeeld.jpg" alt= "voorbeeld afbeelding" /> 
   
              <span class="effect">Demo voorbeeld</span> 
   
  </a>
   
  </div>

We zijn nu klaar met de (x)html. Nou moeten we het laten werken met css en een klein beetje Javascript. Op de Javascript zal ik niet al te diep ingaan maar ik zal wel uitleggen waar het precies voor dient.

Ik laat hier de css zien, daarachter zet ik met comments waarvoor het dient.

Eerst gaan we de div ‘demo’ vormgeven:

Code:

.demo {
              float:left; /* naar eigen wens invullen, dit is het meest gebruikelijker */
              position:relative; /* Hiermee komt het effect op de juiste plek te staan*/
  }

Hier gaan we de afbeelding mee vormgeven:

Code:

.demo img
              border:0px; /* Om die lelijke rand om de afbeelding weg te halen zetten we de border op 0px */
              width:300px; /* Dit is niet perse nodig, maar voor de veiligheid geven we een breedte op */
              height:225px; /* Dit is niet perse nodig, maar voor de veiligheid geven we een hoogte op */
              float:left; /* Ook dit is niet perse nodig, maar dit is meestal wel het geval */
  }

Het effect hoeven we in eerste instantie niet te zien:

Code:

.demo span.effect {
              display:none;
  }

Bij een hover over de afbeelding willen we het effect wel zien:

Code:

.demo a:hover span.effect {
              position:absolute; /* zo laten we de span over de afbeelding ‘zweven’ */
              width:300px; /* Hier is de breedte noodzakelijk, maak het net zo breed als de afbeelding */
              height:225px; /* Hier is de hoogte noodzakelijk, maak het net zo hoog als de afbeelding */
              left:0px; /* zo laten we de span over de afbeelding ‘zweven’ op de juiste plek */
              top:0px; /* zo laten we de span over de afbeelding ‘zweven’ op de juiste plek */
              background:#333; /* Hier mee kunnen we de achtergrond bepalen, dit kan je helemaal zelf invullen */
              display:block; /* Hiermee geven we aan dat het nou wel getoond moet worden*/
              cursor:pointer; /* Zo krijgen we in oudere webbrowsers ook een handje te zien bij een hover */
   
              font:12px Arial, Helvetica, sans-serif; /* dit is extra opmaak, dit kan je zelf invullen */
              color:#000; /* dit is extra opmaak, dit kan je zelf invullen */
              text-decoration:none; /* dit is extra opmaak, dit kan je zelf invullen */
  }

Nog eventjes alles op een rijtje:

Code:

   
  .demo {
              float:left;
              position:relative;
  }
   
  .demo img {
              border:0px;
              width:300px;
              height:225px;
              float:left;
  }
  .demo span.effect {
              display:none;
  }
  .demo a:hover span.effect {
              position:absolute;
              width:300px;
              height:225px;
              left:0px;
              top:0px;
              background:#333;
              display:block;
              cursor:pointer;
              font:12px Arial, Helvetica, sans-serif;
              color:#fff;
              text-decoration:none;
  }

Nou zijn we klaar met de opmaak. Als je het nou test in je moderne webbrowser dan zie je dat het perfect werkt. Echter, het werkt nog niet in Internet Explorer 6. De rede daarvan is dat IE6 de a:hover opmaak bijna niet support. Om dit wel te laten werken hebben we een stukje JavaScript nodig. De JS zegt ongeveer hetzelfde als: wanneer a.iehover wordt gebruikt is dat hetzelfde als a:hover normaal zegt. Een beetje onduidelijk allemaal als je weinig ervaring met JavaScript hebt. Het punt is dat we dit script bovenin onze <head> moeten zetten:

(normaal gesproken ben ik meer voor extern Javascript, maar ik hou deze tutorial graag duidelijk voor beginners)

Code:

<script type="text/javascript">
  ieHover = function() {
              var sfEls = document.getElementsByTagName("A");
              for (var i=0; i<sfEls.length; i++) {
                          sfEls[i].onmouseover=function() {
                                     this.className+=" iehover";
                          }
                          sfEls[i].onmouseout=function() {
                                     this.className=this.className.replace(new RegExp(" iehover\\b"), "");
                          }
              }
  }
  if (window.attachEvent) window.attachEvent("onload", ieHover);
  </script>

Door dit javascript moeten we onze css nog wel even aanpassen.
.demo a:hover span.effect moet verandert worden in:
.demo a:hover span.effect, #menu a.iehover span.effect

De complete css nog een keer, maar nu inclusief de fix:

Code:

.demo {
              float:left;
              position:relative;
  }
   
  .demo img {
              border:0px;
              width:300px;
              height:225px;
              float:left;
  }
  .demo span.effect {
              display:none;
  }
  .demo a:hover span.effect, #menu a.iehover span.effect {
              position:absolute;
              width:300px;
              height:225px;
              left:0px;
              top:0px;
              background:#333;
              display:block;
              cursor:pointer;
              font:12px Arial, Helvetica, sans-serif;
              color:#fff;
              text-decoration:none;
  }

Nou werkt het in alle webbrowsers die tegenwoordig vaak gebruikt worden.
Verschillende werkende voorbeelden van dit effect zijn hier nog een keertje te bekijken.

Vragen of opmerking kunnen in dit topic gepost worden. Als iemand een betere oplossing heeft voor bijvoorbeeld het IE6 probleem, dan hoor ik het graag.
Dit effect vraagt vrij weinig ruimte qua html, css en JavaScript, helaas kan je daarom in <span class="effect"> geen nieuwe links zetten. Mogelijk dat ik hier de komende tijd nog een oplossing voor vind.

Door mijn trage server werken de achtergrond afbeeldingen van de hover niet altijd even goed, dat is dus geen error in het script.

Met vriendelijke groet,

Gijsbert Simon gast2960
www.gijsbertsimon.com

Andere tutorials van mij:
Een menu maken met een afgeronde hover

Bedankt Gijs, ik ga het zsm testen !