homepage Welcome to WebmasterWorld Guest from 54.235.39.132
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
mouse over to an html file
rather than linking to a jpg, prefer link to html file
scato345




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

hello,

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

Suggestions?

Thanks,

Dorian

HEAD

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);
img0_off.src="http://#*$!#*$!#*$!.net/products/footwear/01_altama/altama_3466_lite_6-inch_black_200.jpg";

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");

BODY

<p>
<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>
</p>

 

scato345




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

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.

Thanks,

Dorian

capulet_x




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

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?

capulet_x




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

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

scato345




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

capulet_x,

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
<table>
<tr>
<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.

<tr>
<td width="350" height="225" align="center" valign="bottom">
<table width="100%">
<tr>
td width="30%">
<p>
<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"
name="img0"></a>
</p>
</td>
</tr>
</table>
</td>
</tr>

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.

dorian

scato345




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


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>

Dorian

Drag_Racer




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

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;
image1.src=....
function show(x,img){
var cont=document.getElementById("tmImg");
if(x){
var p=myPosition(x);
cont.style.display="block";
cont.style.backgroundImage="url("+img.src+")";
cont.style.left=p[0]+90+"px";
cont.style.top=p+26+"px";
// set width/height etc of container here...
}
else
{
cont.style.display="none";
}
}

function myPosition(o){
var l=0,t=0;
if(o.offsetParent){
l=o.offsetLeft;
t=o.offsetTop;
while(o=o.offsetParent){
l+=o.offsetLeft;
t+=o.offsetTop;
}
}
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]

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved