login  Naam:   Wachtwoord: 
Registreer je!
 Forum

meerdere onMouseOvers en onMouseOuts combineren? (Opgelost)

Offline Gust - 02/07/2009 11:37 (laatste wijziging 02/07/2009 11:41)
Avatar van GustMySQL interesse Kun je meerdere onMouseOvers en onMouseOuts combineren?

Ik wil een selectmenu nabootsen, waar je zelf nog iets kunt invullen. Dus wat heb ik gedaan:

Ik heb een achtergrondfiguur (in de vorm van een pijl van een select menu) in een tekstveld. Een onMouseover zorgt ervoor dat er een popupafbeelding verschijnt zodra ik met de cursor over het tekstveld ga.

Nu zou ik willen dat deze achtergrondfiguur (het witte pijltje) ook veranderd in een aangeklikt pijltje dmv een rollover. Maar ook dat geeft een OnemouseOver en Onemouseout. Combineren lukt mij dus nog niet

Om te zien wat ik bedoel:
Zie deze pagina. Ik probeer het 4de tekstveld te combineren met de rollover eronder (dus ik wil dat de rolloverpijl eronder rechts in het tekstveld komt te staan)

css:
css code - Bekijk de code zonder highlighting - Klap code in 
  1. <style>
  2. .cursor_handje {
  3.     cursor: pointer;
  4. }	
  5. .cursor_pijl {
  6.     cursor:default;	
  7. }
  8. </style>
  9. <style>
  10. input.man { background-image: url(images/pijl1.gif); 
  11.             background-repeat: no-repeat;
  12.             background-position: center right;
  13.             padding-left: 0.0em;
  14. }
  15. </style>


body onload:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <body onmousemove="gaMee(event)" onLoad="MM_preloadImages('img/blokje_blauw.jpg','images/pijl2.gif')" >


html:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="thumbblok" style="display:none; position:absolute;; left: 116px; top: 117px"> 
  2. </div>
  3.  
  4. <br> 
  5.   <p><a target=_blank onMouseOver="popup('<img src=images/menu.gif>','0',event)"; onMouseOut="stopthumb()"><input name="textarea" type="text" id="textarea" value="" size="45" class="man"></a></p>
  6.  
  7.   <p><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/pijl2.gif',1)"><img src="images/pijl1.gif" name="Image2" width="15" height="20" border="0"></a></p>


Javascript:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script type="text/javascript">
  2. <!--
  3. function MM_swapImgRestore() { //v3.0
  4.   var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
  5. }
  6. function MM_preloadImages() { //v3.0
  7.   var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
  8.     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
  9.     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
  10. }
  11.  
  12. function MM_findObj(n, d) { //v4.01
  13.   var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
  14.     d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  15.   if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  16.   for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  17.   if(!x && d.getElementById) x=d.getElementById(n); return x;
  18. }
  19.  
  20. function MM_swapImage() { //v3.0
  21.   var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  22.    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
  23. }
  24. //-->
  25. </script>

1 antwoord

Gesponsorde links
Offline borger - 02/07/2009 14:48 (laatste wijziging 02/07/2009 14:49)
Avatar van borger Nieuw lid Je kunt een extra functie toevoegen die de 2 functies aanroept.

in het javascript:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. function rolloverTwice(){
  2.        roepfunctie1aan();
  3.        roepfunctie2aan();
  4. }


en in je html doe je dan:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <tag onmouseover="rolloverTwice();"></tag>


of je kunt gewoon:

html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <tag onmouseover="functie1();functie2()"></tag>


doen
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.203s