Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

2 mouseover event's

Designpiet
5 antwoorden
  • <html>

    <head>
    <title>New Page 1</title>

    <script language="JavaScript">
    <!–

    if (window.focus) self.focus();

    if (document.images) {

    effectDefault = new Image();
    effectDefault.src = "pijltjeblank.gif";

    effectDefault1 = new Image();
    effectDefault1.src = "pijltjeblank.gif";

    effectDefault2 = new Image();
    effectDefault2.src = "pijltjeblank.gif";

    effectDefault3 = new Image();
    effectDefault3.src = "pijltjeblank.gif";

    effectDefault4 = new Image();
    effectDefault4.src = "pijltjeblank.gif";

    effectDefault5 = new Image();
    effectDefault5.src = "pijltjeblank.gif";


    effectOn = new Image();
    effectOn.src = "pijltjesmouseover.gif";

    effectOn1 = new Image();
    effectOn1.src = "pijltjesmouseover.gif";

    effectOn2 = new Image();
    effectOn2.src = "pijltjesmouseover.gif";

    effectOn3 = new Image();
    effectOn3.src = "pijltjesmouseover.gif";

    effectOn4 = new Image();
    effectOn4.src = "pijltjesmouseover.gif";

    effectOn5 = new Image();
    effectOn5.src = "pijltjesmouseover.gif";


    }

    function changeImages() {
    if (document.images) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments].src = eval(changeImages.arguments[i+1] + ".src");
    }
    }
    }

    // done hiding –>
    </script>




    </head>

    <body>

    <table width="126" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="126"><img name="effect" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect', 'effectOn')" onMouseOut="changeImages('effect', 'effectDefault')" onClick="return false;"><img name="cause" src="webbinnen_46.jpg" alt="a" width="126" height="33" border="0"></a></td>
    </tr>
    <tr>
    <td width="126"><img name="effect1" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect1', 'effectOn1')" onMouseOut="changeImages('effect1', 'effectDefault1')" onClick="return false;"><img name="cause" src="webbinnen_52.jpg" alt="b" width="126" height="43" border="0"></a></td>
    </tr>
    <tr>
    <td width="126"><img name="effect2" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect2', 'effectOn2')" onMouseOut="changeImages('effect2', 'effectDefault2')" onClick="return false;"><img name="image3" src="webbinnen_58.jpg" alt="c" width="126" height="40" border="0"></a></td>
    </tr>
    <tr>
    <td width="126"><img name="effect3" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect3', 'effectOn3')" onMouseOut="changeImages('effect3', 'effectDefault3')" onClick="return false;"><img name="image4" src="webbinnen_64.jpg" alt="d" width="126" height="45" border="0"></a></td>
    </tr>
    <tr>
    <td width="126"><img name="effect4" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect4', 'effectOn4')" onMouseOut="changeImages('effect4', 'effectDefault4')" onClick="return false;"><img name="image5" src="webbinnen_70.jpg" alt="e" width="126" height="46" border="0"></a></td>
    </tr>
    <tr>
    <td width="126"><img name="effect5" src="pijltjeblank.gif" alt="pijltje" width="20" height="20" border="0"></td>
    <td width="126"><a href="#" onMouseOver="changeImages('effect5', 'effectOn5')" onMouseOut="changeImages('effect5', 'effectDefault5')" onClick="return false;"><img name="image6" src="webbinnen_76.jpg" alt="f" width="126" height="39" border="0"></a></td>
    </tr>
    </table>
    &nbsp;

    </body>

    </html>


    ____________________________________________________________
    Dit is een pagina met mouseover voor het laten zien van een pijltje bij elke link.

    nu wil ik ook dit mousover script erin verwerken en dan bij het aanroepen van mouseover beide script's laten werken. Ik dacht dat je alleen een komma tussen het aanroepen van beide scripts moest zetten, maar dit werkt niet.


    Dit komt dan in de head te staan;

    <SCRIPT language=JavaScript1.2>

    //Pop-it menu- By Dynamic Drive
    //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
    //This credit MUST stay intact for use

    var linkset=new Array()
    //SPECIFY MENU SETS AND THEIR LINKS. FOLLOW SYNTAX LAID OUT

    linkset[0]='<div class="menuitems"><a href="iets.htm">gebruik site</a></div>'
    linkset[0]+='<div class="menuitems"><a href="iets.htm">suggesties</a></div>'
    linkset[0]+='<div class="menuitems"><a href="iets.htm">webmaster</a></div>'
    linkset[0]+='<div class="menuitems"><a href="iets.htm">suggesties</a></div>'
    linkset[0]+='<div class="menuitems"><a href="iets.htm">webmaster</a></div>'


    linkset[1]='<div class="menuitems"><a href="construction.htm">webmaster</a></div>'
    linkset[1]+='<div class="menuitems"><a href="construction.htm">webmaster</a></div>'
    linkset[1]+='<div class="menuitems"><a href="construction.htm">webmaster</a></div>'
    linkset[1]+='<div class="menuitems"><a href="construction.htm">webmaster</a></div>'

    ////No need to edit beyond here

    var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
    var ns6=document.getElementById&&!document.all
    var ns4=document.layers

    function showmenu(e,which){

    if (!document.all&&!document.getElementById&&!document.layers)
    return

    clearhidemenu()

    menuobj=ie4? document.all.popmenu : ns6? document.getElementById("popmenu") : ns4? document.popmenu : ""
    menuobj.thestyle=(ie4||ns6)? menuobj.style : menuobj

    if (ie4||ns6)
    menuobj.innerHTML=which
    else{
    menuobj.document.write('<layer name=gui bgColor=#E6E6E6 width=165 onmouseover="clearhidemenu()" onmouseout="hidemenu()">'+which+'</layer>')
    menuobj.document.close()
    }

    menuobj.contentwidth=(ie4||ns6)? menuobj.offsetWidth : menuobj.document.gui.document.width
    menuobj.contentheight=(ie4||ns6)? menuobj.offsetHeight : menuobj.document.gui.document.height
    eventX=ie4? event.clientX : ns6? e.clientX : e.x
    eventY=ie4? event.clientY : ns6? e.clientY : e.y

    //Find out how close the mouse is to the corner of the window
    var rightedge=ie4? document.body.clientWidth-eventX : window.innerWidth-eventX
    var bottomedge=ie4? document.body.clientHeight-eventY : window.innerHeight-eventY

    //if the horizontal distance isn't enough to accomodate the width of the context menu
    if (rightedge<menuobj.contentwidth)
    //move the horizontal position of the menu to the left by it's width
    menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX-menuobj.contentwidth : ns6? window.pageXOffset+eventX-menuobj.contentwidth : eventX-menuobj.contentwidth
    else
    //position the horizontal position of the menu where the mouse was clicked
    menuobj.thestyle.left=ie4? document.body.scrollLeft+eventX : ns6? window.pageXOffset+eventX : eventX

    //same concept with the vertical position
    if (bottomedge<menuobj.contentheight)
    menuobj.thestyle.top=ie4? document.body.scrollTop+eventY-menuobj.contentheight : ns6? window.pageYOffset+eventY-menuobj.contentheight : eventY-menuobj.contentheight
    else
    menuobj.thestyle.top=ie4? document.body.scrollTop+event.clientY : ns6? window.pageYOffset+eventY : eventY
    menuobj.thestyle.visibility="visible"
    return false
    }

    function contains_ns6(a, b) {
    //Determines if 1 element in contained in another- by Brainjar.com
    while (b.parentNode)
    if ((b = b.parentNode) == a)
    return true;
    return false;
    }

    function hidemenu(){
    if (window.menuobj)
    menuobj.thestyle.visibility=(ie4||ns6)? "hidden" : "hide"
    }

    function dynamichide(e){
    if (ie4&&!menuobj.contains(e.toElement))
    hidemenu()
    else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
    hidemenu()
    }

    function delayhidemenu(){
    if (ie4||ns6||ns4)
    delayhide=setTimeout("hidemenu()",500)
    }

    function clearhidemenu(){
    if (window.delayhide)
    clearTimeout(delayhide)
    }

    function highlightmenu(e,state){
    if (document.all)
    source_el=event.srcElement
    else if (document.getElementById)
    source_el=e.target
    if (source_el.className=="menuitems"){
    source_el.id=(state=="on")? "mouseoverstyle" : ""
    }
    else{
    while(source_el.id!="popmenu"){
    source_el=document.getElementById? source_el.parentNode : source_el.parentElement
    if (source_el.className=="menuitems"){
    source_el.id=(state=="on")? "mouseoverstyle" : ""
    }
    }
    }
    }

    if (ie4||ns6)
    document.onclick=hidemenu

    </SCRIPT>



    en dan dit toevoegen aan mouseover van de links hierboven gescheiden door een komma.

    onmouseover="showmenu(event,linkset[1]), …en dan de rest
    onmouseout=delayhidemenu(),…..en dan de rest





    Dit werkt niet en ik weet voor de rest niet hoe ik het anders zou moeten doen.

    weet iemand hoe je deze 2 mouseover events kunt laten samenwerken (tegelijk) ?/????

    alvast bedankt
  • niemand die hier iets over kan zeggen ?????????
  • leg eens concreet uit wat je bedoelt met 2 mousovere events die samenwerken. wat is de bedoeling?
  • Volgens mij moet je of puntkomma's (;) tussen die acties zetten, of gewoon een nieuwe functie aanroepen die vervolgens weer die twee functie aanroept…
  • Nou swiers ik zal het even uitleggen

    Ik wil dus het volgende

    als je over bijv. het plaatje webbinnen_46.jpg gaat, ….dat je dan zowel het menu te zien krijgt alswel het pijltje ernaast…… "pijltjesonmouseover.gif"


    hoop dat het zo duidelijk is.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.