Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

mouse over to an html file

rather than linking to a jpg, prefer link to html file



11:51 pm on May 4, 2007 (gmt 0)

5+ Year Member


I successfully used the below code when the img0 "on" contained a link similar to the img0 "off" link below it.

The image I am pulling up is large and it displays in the existing window somewhat down fron the top of the screen, cutting off the bottom of the image. This is becasue the page text to the images's right is higher than the image and so the image appears with a space above it - and the image cannot be raised because approaching the scroll bar deactivattes the "on" function.

The image is on screen left and the text is on screen right

I do not want to open a new window. I prefre the suto close function of "onmouseover"

Linking to an html file containing the jpg would work fine, because it is still a popup and disappears when the mouse is moved off of target, returning viewer to original page.

I've tried several ways of doing some version of an href, both with full urls and even the # intra page anchor shown below (both the html file and the original html are in the same folder. THat didn't work, at least the way I did it.

In the original code that works I used a jpg with img src instead of the a href and html

what i have above does not work





img0_on = new Image(300,300);
img0_on.<a href="01_altama.html#altama_3466_lite_6-inch_black"></a>";
img0_off = new Image(300,300);

function over_image(parm_name)
document[parm_name].src = eval(parm_name + "_on.src");
function off_image(parm_name)
document[parm_name].src = eval(parm_name + "_off.src");


<a href= "#" onClick="window.open('#*$!#*$!xx.net/positions/footwear/01_altama/pos_pop_altama_3466_lite_6-inch_black_1000.html', 'politics','height=200, width=200, <!--scrollbars=yes,toolbar=yes, location=yes, directories=yes, status=yes menubar=yes,--> resizable'); return false;"
onmouseover="over_image('img0');" onmouseout="off_image('img0')"><img src="http://#*$!#*$!#*$!x.net/products/footwear/01_altama/altama_3466_lite_6-inch_black_200.jpg" alt="altama 3466" style="border: 0px solid" name="img0"></a>


11:48 pm on May 5, 2007 (gmt 0)

5+ Year Member

on same subject.

In searching for an answer to "MouseOver/MouseOut -- File Swap"

I see that there are many ways to script "MouseOver/MouseOut -- image Swap"

I am still looking for a way to open a file containing an image that will open in a new window on MouseOver and revert to original window when MouseOut.

I can do this via "OnClick" but not with "MouseOver/MouseOut" command.




12:52 am on May 7, 2007 (gmt 0)

5+ Year Member

Dorian, does your script work the way that you want when you have popups enabled in your browser or do you get the same result regardless of the setting?


12:55 am on May 7, 2007 (gmt 0)

5+ Year Member

Also, Dorian, when you say, "... a file containing an image" what exactly do you mean? An html file?


3:44 am on May 7, 2007 (gmt 0)

5+ Year Member


the script works fine for the image swap. The large image displays in the pop-up window. all pop-ups come through well.

as you will see i have a bit of redundancy in the script (the onClick command). I use this same bit of script to move the viewer from the product thumbnail to the first pop-up window, which contains the product's detailed information and has additional links to the selling desk and checkout.The text below the 200px jpg explains that the mouseover will maximize the photo (to 760px.) i tried removing the OnClick, and the script didn't work, "so knowing next to nothing about javascript, (i have just cracked open the book this week) i left the unwanted OnClick command in place." Also I used html comment tags to disable the scroll bar, etc to have a cleaner look at the image.

The html file is a simple file. it contains the declaration the head and body and a
<td> <img src="http:// url, etc >...............

the image displays well when brought up.

here is the body code with all of it twists and turns, knowing, - as i said, - that it could be cleaner. and, actually if i can retrieve the html file i wouldn't need the full task bar / scroll bar there.

the resizeable with - ' - in place of yes is a reminder to decide which way to go with javascript once i am comfortable with it. also, -as soon as i get the code all cleaned up, i will be removing the - valign - from the body and taking care of it with the css. it too is a holdover.

<td width="350" height="225" align="center" valign="bottom">
<table width="100%">
td width="30%">
<a href= "#" onClick="window.open('#*$!#*$!x.net/products/footwear/01_altama/altama_3466_800.jpg', 'politics','height=200, width=200, <!--scrollbars=yes,toolbar=yes, location=yes, directories=yes, status=yes menubar=yes,--> resizable'); return false;"
onmouseover="over_image('img0');" onmouseout="off_image('img0')"><img src="http://#*$!#*$!xx.net/products/footwear/01_altama/altama_3466_200.jpg" alt="ALTAMA 3466" style="border: 0px solid"

hope i've answered your questions after all i've said.

i would really like to have this feature as it would add a bit of interaction and speed to the site, and still not be too intricate or distracting.



5:11 am on May 8, 2007 (gmt 0)

5+ Year Member

Hello again,
I tried this script w/o onClick and can't raise anything.

<A HREF="http://#*$!#*$!.net/positions/06_combat-kicks/b_military/pos_pop_test_1000.html" onMouseover="window.status='Hi there!'; return true"
onMouseout="window.status=' '; return true"><img src="http://#*$!xx.net/products/footwear/01_altama/altama_3350_200.jpg" alt="altama 3350" style="border: 0px solid" </A>



10:00 am on May 12, 2007 (gmt 0)

5+ Year Member

instead of changing the scr of the image which scrambles pages, why not have a singe hidden div, you onmouseover event trigger a positioning function and changes the background image of the div

small code, lightning fast

// number 90 and 26 are just offsets for the container so you not on top of your trigger object
var image1=new Image;
function show(x,img){
var cont=document.getElementById("tmImg");
var p=myPosition(x);
// set width/height etc of container here...

function myPosition(o){
var l=0,t=0;
return [l,t];

<a href="javascript:window.open(stuff here)" onmouseover="show(this,'image1')" onmouseout="show()">.....

<div style="display:none" id="tmImg"></div>

something like that... I have a page this is working on if you want to see it function...

[1][edited by: Drag_Racer at 10:02 am (utc) on May 12, 2007]


Featured Threads

Hot Threads This Week

Hot Threads This Month