|
|
|
Tutorial pages:« 1 » |
|
funny-bunny
|
| On roll over - Posted on: 30-01-2005 at 20:42 | |
 
|
Hier een uitleg om een roll over te maken:
Dit zet je in de <head> tags zet je dit neer:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
|
<!-- Rollover Image Script - Place within <head> tag -->
<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 daar waar je rollover plaatje moet komen maak je bijvoorbeeld 2 plaatjes.
1 plaatje die je ziet als je muis er niet over gaat en 1 die verschijnt als je muis erover gaat.
In het voorbeeld heeft het plaatje wat statisch is dus wat je ziet zonder wat met je muis te doen "button-babbelbox.jpg" en het plaatje dat verschijnt wanneer je er met je muis overgaat "button-algemeen.jpg".
Je geeft een unieke naam bij document.bab1 zoiets als:
document.alg1 en verandert dat in je script waar document.bab1 staat in deze door jou gekozen unieke naam.
1
2
3
4
|
|
<a href="http://www.jouwsite/jouwpagina.html" onMouseOut="RestoreImg()"
onMouseOver="SwitchImg('document.bab1','document.bab1','button-algemeen.jpg')">
<img src="button-babbelbox.jpg" name="bab1" width="150" height="56" alt=" bc babbelbox" border="0"></a>
|
|
|
Zijn er vragen hoor ik het graag.
Groeten, Lissy
life is what you make it
|
|
|
|
|
