mouse-over: images veranderen...

LazyTiger · Bericht door **LazyTiger** » 13 mar 2004, 18:44

je ziet wel eens dat alle links in een forum van kleur veranderen als je er met de muis op komt.
ik zit nu te denken, is dit ook toe te passen op images?
moet je dan een bewegend gifje maken die doormiddel van een mouse over script wordt weergegeven (ipv het standaard plaatje)?

Cheeta · Bericht door **Cheeta** » 13 mar 2004, 18:54

ehhhm nee dat kan je doen door een button script heb er alleen geen een bij de hand kijk hier eens http://www.leejoo.nl

mzzl 8)

Headstrong · Bericht door **Headstrong** » 13 mar 2004, 19:59

Noem eens een voorbeeld forum

Luuk · Bericht door **Luuk** » 13 mar 2004, 20:23

http://www.esaclan.com/test (wel nog iets meer veranderd, maar het princiepe is hetzelfde)
Ik heb het gedaan dus weet ik ook hoe het moet.

Ik neem aan dat je het in overall_header wil neerzetten. Zet dit yussen de <head> en </head> tags

Code: Selecteer alles

<script language="JavaScript" type="text/javascript">
<!-- Hide from older browsers
function SwitchImg()
{ //start
  var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
    for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
    	store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
    if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
        (store.indexOf('document.all[')==0 && document.all==null))
         store = 'document'+store.substring(store.lastIndexOf('.'),store.length);
         obj = eval(store);
    if (obj != null) {
   	   switcher[keep++] = obj;
      switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
      obj.src = SwitchImg.arguments[rem+2];
  } }
  document.Data = switcher;
} //end

function RestoreImg()
{ //start
  if (document.Data != null)
    for (var rem=0; rem<(document.Data.length-1); rem+=2)
      document.Data[rem].src=document.Data[rem+1];
} //end

// end hiding contents -->
</script>

Dan zet je dit op de plaats wat je wilt

Code: Selecteer alles

<a href="" onMouseOut="RestoreImg()" onMouseOver="SwitchImg('document.img1','document.img1','blabla2.gif')"><img src="blabla.gif" name="img1" width="0" height="0" alt="" border="0"></a>

Het eerste wat er staat is het plaatje als je er overheen gaat (blabla2.gif), het tweede wat er normaal staat (blabla.gif)

Als je het bij meerdere plaatjes wilt hebben moet je img1 bij het tweede plaatje vervangen door bijvoorbeeld img2 enzovoorts...

Headstrong · Bericht door **Headstrong** » 13 mar 2004, 21:08

Ik heb ook een een mouse over op mijn headerbuttons gedaan een poosje geleden met een simpel script:

Code: Selecteer alles

<img src="URL PLAATJE" style="width:15;height:15;filter:alpha(opacity=40)" /onmouseover=" 
this.filters.alpha.opacity=100" /onmouseout=" 
this.filters.alpha.opacity=40">

Width, height en opacity veranderen naar je eigen smaak.

mosymuis · Bericht door **mosymuis** » 13 mar 2004, 22:08

Headstrong, dat script werkt alleen in IE. Daarnaast vervagen alleen de kleuren omdat je ze getint transparant maakt, ze veranderen niet. En wanneer je een normale image wissel gebruikt kost dit ook minder processorkracht.

Mocht je het toch zo willen doen, doe het dan goed. Kijk hier voor de correcte CSS2 specificaties.

Stef · Bericht door **Stef** » 14 mar 2004, 00:14

Ik doe het altijd met DOM.

Eeh.. http://www.dynamicdrive.com/dynamicindex15/domroll.htm

Alleen even kijken of het ook werkt met phpBB maar dat zal wel.

mosymuis · Bericht door **mosymuis** » 14 mar 2004, 00:18

Stefkuh schreef:Ik doe het altijd met DOM.
Eeh.. http://www.dynamicdrive.com/dynamicindex15/domroll.htm

Haha, relaxed!

Die kende ik nog niet, echt een vet script. En zoals het daar al wordt beschreven: compatible met alle huidige browsers!

Stefkuh schreef:Alleen even kijken of het ook werkt met phpBB maar dat zal wel.

Natuurlijk, wat HTML betreft werkt zoieso alles in phpBB. Zolang je maar weet welke template files je moet hebben.

LazyTiger · Bericht door **LazyTiger** » 14 mar 2004, 01:15

hm..
zal het eens allemaal bekijken..

het is overigens een idee, nog geen plan... dus..