HTML Tutorial


 /help/HTML Help Forum   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
JPG PopUp when text-MouseOver using Javascript Fixed Pos.
Post new topic   Reply to topic    HTML Help Forum -> Javascript
View previous topic :: View next topic  
Author Message
Gordon_Bennett



Joined: 23 Nov 2007
Posts: 8

PostPosted: Tue Jun 10, 2008 2:54 am     JPG PopUp when text-MouseOver using Javascript Fixed Pos. Reply with quote

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

PostPosted: Tue Jun 10, 2008 4:07 am     Reply with quote

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

PostPosted: Tue Jun 10, 2008 8:34 am     Reply with quote

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

PostPosted: Fri Jun 12, 2009 1:59 pm     yes! Reply with quote

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

PostPosted: Mon Jun 15, 2009 10:55 am     Reply with quote

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. :]
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum -> Javascript All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
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
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
DARFUR
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial