Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jan 2003
    Location
    1st floor, 3rd door on the right side
    Posts
    77
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question display picture instead of text

    hello!

    i cannot code in javascript but try to look good using the work of others ;-)
    now, seriously: i have found a cool dynamic menu i'd like to use in a different way.

    moving the mouse over a menu item shows some text somewhere else i can define. instead of showing this text, i'd like a picture to show up when moving the mouse cursor over the menu item.

    -is that possible with this menu?
    - if yes, what do i need to change? let's say my pictures would be "pic1.gif" and "pic2.gif".

    thanks a lot for the reply in advance
    cheers
    fred


    here the menu:

    in <head>

    <script language="javascript">
    <!--
    /*Menu by Clarence Eldefors (http://www.freebox.com/cereweb)*/
    function movein(which,html){
    which.style.background="#c94b4b"
    if (document.getElementById)
    document.getElementById("boxdescription").innerHTML=html
    else
    boxdescription.innerHTML=html
    }

    function moveout(which){
    which.style.background='tan'
    if (document.getElementById)
    document.getElementById("boxdescription").innerHTML='&nbsp;'
    else
    boxdescription.innerHTML='&nbsp;'
    }
    //-->
    </script>

    in <body>


    <table bgcolor="#dff9f9" border="1" bordercolor="#dff9f9" cellpadding="2" cellspacing="0" height=100% width="100">

    <tr>
    <td bgcolor="tan" border="1" height="70">
    <center>
    <img src="Pic_Sax.jpg" width="78" height="54" border="0" align="middle">
    </center>
    </td></tr>

    <tr>
    <td height="28" class="menu" bordercolor="#dff9f9" id="choice1" style="background-color:tan; cursor:hand"
    onmouseover="movein(this,'where it all begun')" onmouseout="moveout(this)">
    <a href="http://www.htmlbasix.com/htmlbasics.shtml">html basix</a></td></tr>

    <tr>
    <td height="28" class="menu" bordercolor="#dff9f9" id="choice2" style="background-color:tan; cursor:hand"
    onmouseover="movein(this,'Free Java applets')" onmouseout="moveout(this)">
    <a href="http://freewarejava.com">freewarejava</a></td></tr>

    <tr>
    <td height="28" class="menu" bordercolor="#dff9f9" id="choice3" style="background-color:tan; cursor:hand"
    onmouseover="movein(this,'what about CSS, JS, Flash ?')" onmouseout="moveout(this)">
    <a href="http://www.w3schools.com/default.asp">more learning</a></td></tr>

    <tr>
    <td height="28" class="menu" bordercolor="#dff9f9" id="choice4" style="background-color:tan; cursor:hand"
    onmouseover="movein(this,'blabla')" onmouseout="moveout(this)">
    <a href="http://www.mtv.com/onair/jackass">need a break?</a></td></tr>

    <tr>
    <td bgcolor="tan">
    </td></tr>

    <tr>
    <td bordercolor="#dff9f9" bgcolor="ivory" height="48">
    <font id="boxdescription" face="Verdana" size="2" color="#c94b4b">
    </font></td></tr>

    </table>
    Why do sheeps not shrink when it rains ?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,502
    Thanks
    3
    Thanked 500 Times in 487 Posts
    onmouseover="movein(this,'<img src="One.gif" >')"
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Jan 2003
    Location
    1st floor, 3rd door on the right side
    Posts
    77
    Thanks
    1
    Thanked 0 Times in 0 Posts
    cool vic, thanks a lot.

    for those who wish to use this, the exact code is:
    onmouseover="movein(this,'<img src=Pic1.gif >')".

    cheers
    fred
    Why do sheeps not shrink when it rains ?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •