Question

I tried some thing like this,

  <script>
    function sample(image){
            document.write('<img src="photo/'+image+'" width=200 height=200/>');
         //document.open("photo/"+image);
    }
</script>

<select name="selection">
          <option onmouseover="return sample('07A31A1250.jpeg')">Aaaaaaaa</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Bbbbbbbb</option>
          <option onmouseover="return sample('07A31A1251.jpeg')">Cccccccc</option>
          <option onmouseover="return sample('07A31A1250.jpeg')">Dddddddd</option>
  </select>

I code this for the purpose of displaying the specified image in sample method when ever the mouse is over on it..
But when i placed/over mouse pointer onto the option,the corresponding image isn loading in entire page instead of showing it like a pop-up. How to solve my problem.???

and it is supported in firefox browser but not in chrome.Is there any work around to do it in browser that doesn’t support mouse over options??

Answer 1

document.write is deprecated.

Instead perhaps use something like

function fubar)(){
 document.getElementById('foo').value="";
 document.getElementById('foo')="<img src='photo/+image+.jpeg'>";
} 

another way is to use CSS and put the image in the options

img{display:none;}
option:hover img{display:inline;}

but the CSS change isn’t permanent unlike Javascript