Image in frame on mouse hover

Discussion in 'Javascript' started by Fokke Nauta, Jan 26, 2006.

  1. Fokke Nauta

    Fokke Nauta Guest

    Hi all,

    I am searching for a script which does the following:

    I have a frameset with two pages: left and right.
    On the left page there is an image map. When I hover the mouse over a
    certain area of the image map, I want to appear an image in the right page.
    There are more area's on the image map. I want a specific picture to appear,
    each one correlated to a specific area. Is there any scrip which can do
    this?

    Thanks in advance for your help.

    With best regards,

    Fokke Nauta
     
    Fokke Nauta, Jan 26, 2006
    #1
    1. Advertisements

  2. Fokke Nauta

    Evertjan. Guest

    Fokke Nauta wrote on 26 jan 2006 in comp.lang.javascript:
    You could write a script, beste Fokke,
    but if there "is" one [where?] I wouldn't know.

    In Javascript you can reference other frames like this:

    <script type='text/javascript'>
    var Imag = parent.otherFrame.document.getElementById('imag')
    var ImagOrigSrc = Imag.src
    </script>

    <...
    onmouseover = "Imag.src = '/images/myImg.jpg'"
    onmouseout = "Imag.src = ImagOrigSrc"

    Not tested.

    However, Fokke, why use frames?
    Much better use <div>s, classes and and css styles.
     
    Evertjan., Jan 26, 2006
    #2
    1. Advertisements

  3. Fokke Nauta

    Fokke Nauta Guest

    Hi Evert Jan,

    Thanks for your quick reply.
    I will give it a try, although I'm not a javascript programmer.
    Initially I wanted to use a frame because I thought this in the only way to
    show a picture when hovering over an image map. Obviously there must be
    other ways. I have to look into <div>s and classes.
    If you have a hint of how to achieve this without using a frame, you are
    welcome.

    Groeten,
    Fokke
     
    Fokke Nauta, Jan 27, 2006
    #3
  4. Fokke Nauta

    Evertjan. Guest

    Fokke Nauta wrote on 27 jan 2006 in comp.lang.javascript:
    Frames have nothing to do with it.

    <map name="myMap">
    <area shape="rect" coords="20,30,650,111" nohref
    onMouseOver="toggleImage('imag1.jpg')">
    <area shape="rect" coords="....
    <area shape="rect" coords="....
    <area shape="..." coords="....
    </map>

    <img src="/images/mapImage.jpg" border="0" usemap="#myMap"
    onMouseOut="toggleImage('default.jpg')"
    style="position:absolute;right:20px;bottom:50px;">


    <imag src='default.jpg' id ='imloc'>


    <script ....

    function toggleImage(im){
    document.getElementById('imloc').src=im
    }

    not tested, you will have to debug this.
     
    Evertjan., Jan 27, 2006
    #4
  5. Fokke Nauta

    Fokke Nauta Guest

    Bedankt, Evertjan.

    I'll give it a try!

    Best regards,
    Fokke
     
    Fokke Nauta, Jan 30, 2006
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.