Curious about Image Roll Overs

liunx · Jan 10, 2008

Curious, 
 
I am trying to make a web page that when a user mouses over a line of text, an image pops up somewhere else on the screen. 
 
Can you only do MouseOvers when using an href ? 
 
Am i making sence? 
 
Thanx in advance, 
ulyssesi have no idea if this would work, but... 
 
 
 
and in the CSS 
 
cool{ 
position:absolute; 
top:whatever; 
etc etc etc 
} 
 
or use a .visible="true" in the javascript, i guess 
i hope that made sensein modern browsers mouseover will work for most tags. In older browsers the choice is very limited, but fortuantely there are not many old browser left around: 
 
<html> 
<head> 
</head> 
<body> 
<div id="lyr" style="visibility:hidden"> 
<img src=http://www.htmlforums.com/archive/index.php/"yourimage.jpg"> 
</div> 
 
A whole bunch of other stuff in the page 
 
 
show image 
 
</body> 
</html>Hi there COBOLdinosaur, 
 
You just beat me with your reply..

But luckily for me your code will not work until... 
you pop a single quote here.. 
getElementById('lyr)

So I will post my effort - fully tested- now

<html> 
<head> 
 
<style type="text/css"> 
 
</style> 
 
<head> 
<body> 
 
<div id="image"><img src=http://www.htmlforums.com/archive/index.php/"some.jpg"alt="an image" /></div> 
<div id="text" onmouseover="getElementById('image').style.visibility='visible'" 
onmouseout="getElementById('image').style.visibility='hidden';">A line of text</div> 
 
</body> 
</html> 
c

theadlol fully tested and it works lol i just checked and i had anastacia's picture popping out! thanks a lot thats a cool code !

That is some very slick stuff for sure. 
 
I hate to be nieve and ask for more. But i know nothing about CCS and only the very minimul about HTML. 
 
Where do i put a POSITION IN? 
 
I need it to appear in a specific spot for the most part every time. 
 
anythoughts. 
 
 
ulysses freeman 
 
EDIT: 
 
When i say location, i would like it to appear in a certain Frame.Hi there ulysses freeman, 
 
To adjust position in the css is quite easy..

div#text 
{ 
font-family:arial; 
font-size:16px; 
color:#000000; 
position:absolute; 
top:10%; 
left:10%; 
} 
 
Alter these values to position the text... 
you can use either percentage or px(percentages are more flexible) 
This will set your text in relation to the top left corner of the page. 
 
Follow a similar procedure for the image positioning

c

theadOriginally posted by coothead 
Hi there ulysses freeman, 
 
To adjust position in the css is quite easy..

div#text 
{ 
font-family:arial; 
font-size:16px; 
color:#000000; 
position:absolute; 
top:10%; 
left:10%; 
} 
 
Alter these values to position the text... 
you can use either percentage or px(percentages are more flexible) 
This will set your text in relation to the top left corner of the page. 
 
Follow a similar procedure for the image positioning

c

thead 
 
Thanx. 
 
What i really need, sorry I realized afterwards, i wasn't making myself clear. 
 
I need to actualy have the image pop up in the same box at all times. 
 
And to be honest, it'll move down as the user scrolls down the page. 
 
So depending on what sentence the user mousing over, will depend on what image box the image shows up in. 
 
clearer?

I hope so 
 
UlyssesAlso, 
 
can this code be used for MULTIPLE lines? 
 
What i'm designing is a list of items. 
 
When the user mouses over an item, the image is suppose to display the image next to it...or in a floating frame. 
 
So can this code you have shown here, work for mulitple lines? 
 
ulyssesHi there ulysses,can this code be used for MULTIPLE lines?Yes, this is possible.

Of course, as more images are added, the coding 
becomes a little more involved

This is mainly due to the positioning of the image 
in line with the mouseover word. 
 
I have attached an html file so that 
you may see how it works in practise

c

theadto do it within a iframe you need the name of the frame 
 
<div id="text" onmouseover="frame_name_here.getElementById('image').style.visibility='visible'" 
onmouseout="frame_name_here.getElementById('image').style.visibility='hidden';">A line of text</div> 
 
I beleive that should work, if not you might need something before the frame name.Ok, 
 
So do I have to do a to do 
 
#image 
{ 
position:absolute; 
etc..etc.. 
} 
 
for EVERY picture I decide to do? 
 
I can't just make one method and then send all pictures there? 
 
I'm from Java and stuff and I'm of the mind that I should be able to create a single function in order to display the picture all the time, floating at the end of the line. 
 
Hrmmmmm....I know nothing abuot CCS so i'm trying ot also find information that may helpme. 
 
Cheers for all the help you have been thus far though. 
 
ulyssesif you want the image to appear in a certain spot but multiple lines then yes you have to tell it where for every picture. 
 
if the image is in the same spot on every link hovered over than no you do not.Originally posted by scoutt 
if you want the image to appear in a certain spot but multiple lines then yes you have to tell it where for every picture. 
 
if the image is in the same spot on every link hovered over than no you do not. 
 
Ok, this is the way it works right now 
 
position:absolute; 
top:0%; 
left:30%; 
visibility:hidden; 
 
 
I want it to be in that possition every time. Even if the user scrolls down. It will be 30% to the left and right at the top of the window. 
 
I am only going to be scrolling down the screen. BUt either way the picture will always show up. right at the top, 30% to the left. 
 
 
Ulysseswill that be for every image? if so then do this 
 
 
 
img 
{ 
position:absolute; 
etc..etc.. 
} 
 
that will make every image be in that spot, but if you don't want every image then you need to keep the #image id there. 
 
then in your image tags you need to have id="image" 
 
get it?Originally posted by scoutt 
will that be for every image? if so then do this 
 
 
 
img 
{ 
position:absolute; 
etc..etc.. 
} 
 
that will make every image be in that spot, but if you don't want every image then you need to keep the #image id there. 
 
then in your image tags you need to have id="image" 
 
get it? 
 
Ok, i think i understand, and it is NOT what i want..hahah, after all that. 
 
I realized that if i scroll the page down the bottom, the image still appears on the top of the screen. And in the window. 
 
I thought that code was based on the window and not on the web page itself. 
 
Thanx for all the help, 
 
ulysses

Curious about Image Roll Overs

liunx

Guest