Pagina 1 van 1
mouse-over: images veranderen...
Geplaatst: 13 mar 2004, 18:44
door LazyTiger
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)?
Geplaatst: 13 mar 2004, 18:54
door Cheeta
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)
Geplaatst: 13 mar 2004, 19:59
door Headstrong
Noem eens een voorbeeld forum
Geplaatst: 13 mar 2004, 20:23
door Luuk
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...
Geplaatst: 13 mar 2004, 21:08
door Headstrong
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.
Geplaatst: 13 mar 2004, 22:08
door mosymuis
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.
Geplaatst: 14 mar 2004, 00:14
door Stef
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.
Geplaatst: 14 mar 2004, 00:18
door mosymuis
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.
Geplaatst: 14 mar 2004, 01:15
door LazyTiger
hm..
zal het eens allemaal bekijken..
het is overigens een idee, nog geen plan... dus..