 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
Gordon_Bennett
Joined: 23 Nov 2007 Posts: 8
|
Posted: Tue Jun 10, 2008 2:54 am JPG PopUp when text-MouseOver using Javascript Fixed Pos. |
|
|
|
Hello
I recently made a similar request for help on this forum - http://www.htmlcodetutorial.com/help/sutra38890.html#38890 - and had some very helpful suggestions that got me on my way.
Everything is in order but now i need the image to 'load/popup' in a specific place on the page, i.e. not in relation to the text or mouse head (tooltip). N.B. I'm just using frames as a guide for where the image should always load/popup.
I noticed that the script is using tooltip as a reference, should i be using a different type of Javascript for this? Or is there a way to script the tooltip to load in a specific place.
Hope this all makes sense, i can give you any more info you need.
Eagerly waiting for a suggestion.
Kind Regards
Gordon
Last edited by Gordon_Bennett on Mon Feb 08, 2010 9:22 am; edited 1 time in total |
|
sticks464

Joined: 31 Dec 2006 Posts: 2629
|
Posted: Tue Jun 10, 2008 4:07 am |
|
|
|
Here's one that I use quite often. About the same as the tooltip script, only not as complicated, and has a fixed position for the image display.
Script (goes in head section). Continue on with p3, p4 etc.
| Code: |
<script type="text/javascript">
p1 = new Image;
p1.src = "images/myImage.gif"; //path to image to be displayed on rollover
p2 = new Image;
p2.src = "images/myImage_4.jpg"; //path to image to be displayed on rollover
</script> |
html (this element can be anywhere on the page, div or td)
| Code: |
<div class="imgholder">
<img src="" name="mypicture" /> <!-- Change img src path for image to be displayed onMouseOut -->
</div> |
html for link
| Code: |
<a href="#" onMouseOver="mypicture.src=p1.src" onMouseOut="mypicture.src=''" target="_blank">Mouse over Here !</a>
<!-- Change onMouseOut path to image between '' or leave blank; add link path to a href="#" --> |
css (change as needed)
| Code: |
.imgholder {
float:right;
width:78px; /* Width of largest image */
height:27px; /* Height of largest image */
margin:10px;
img {
border:none; /* Removes default blue border in IE */}
} |
|
|
Gordon_Bennett
Joined: 23 Nov 2007 Posts: 8
|
Posted: Tue Jun 10, 2008 8:34 am |
|
|
|
Thanks again sticks464
This has totally sorted out my problem!
I thought there might have been a pretty simple code, one that i relatively understand for once.
Superb work once again!
Gordon |
|
c_rok06

Joined: 12 Jun 2009 Posts: 3
|
Posted: Fri Jun 12, 2009 1:59 pm yes! |
|
|
|
| Thank you for this! I have been searching for this exact thing for a while now. Much appreciated. |
|
c_rok06

Joined: 12 Jun 2009 Posts: 3
|
Posted: Mon Jun 15, 2009 10:55 am |
|
|
|
That works great.. now I have another question. Is it possible to do the same--have the image pop-up in a certain place--except not on rollover but on click. This is probably a different piece of script all together but I would appreciate being pointed in the right direction. :]
I will start a new post. :] |
|
|
|
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot vote in polls in this forum
|
|
|
|
|
 |
|
|
|
|
|
|
|