|mouse over to an html file|
rather than linking to a jpg, prefer link to html file
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_off = new Image(300,300);
document[parm_name].src = eval(parm_name + "_on.src");
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>
REFINED AND SIMPLIFIED QUESTION
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.
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?
Also, Dorian, when you say, "... a file containing an image" what exactly do you mean? An html file?
the script works fine for the image swap. The large image displays in the pop-up window. all pop-ups come through well.
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.
<td width="350" height="225" align="center" valign="bottom">
<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.
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>
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;
// set width/height etc of container here...
<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...
[edited by: Drag_Racer at 10:02 am (utc) on May 12, 2007]