|
| |
|
|
Shirley
Posts: 3126
Joined: 1/8/1999
From: Omaha, Ne USA
Status: offline
 |
pop up image on mouseover using css - 11/12/2004 22:41:35
I recently discovered how to get an image to pop up on mouseover using only css. You can see it here http://moneytreesystems.com/css/picpopup.html
_____________________________
Everything But Cake
|
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 11/12/2004 23:03:03
Thanks Shirley, can you post this in the css links section? I think that would be a great place for this one. Nice find!
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/17/2004 10:52:31
I am trying to do something similair.
I have a list of people on the left side of a page, and on mouse over I want a short description of that person to appear somewhere in the upper right corner.
Anyone know of a way to do this?
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: pop up image on mouseover using css - 11/17/2004 13:52:12
Eric Meyer has done something similar. You would just have to play with positioning the pop up.
HTH
Carol
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/17/2004 14:25:05
That looks exactly like what I want. Only the position and colors need changing, the technique is just what I was looking for.
Thanx a lot.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 5:58:45
Well, I've been trying around with this. And it works. I get excactly the effect I want.
But, and it's a nasty but for me, it only works correctly in Firefox, not in IE. While on Eric Meyer's example it works flawlessly in both. I can't seem to spot my error. Can anyone help me spot it?
The code I use is the following :
stylesheet
div#character
{
position : relative;
left : 10%;
width : 80%;
height : 700px;
z-index : 100;
font : 16px Verdana;
}
div#character a
{
display : block;
color : black;
margin : 0 0 1px;
text-decoration : none;
}
div#character a:hover
{
color : #1010FF;
}
div#character a span
{
display : none;
}
div#character a:hover span
{
font-family : Papyrus, MS Sans Serif, Sans Serif;
display : block;
position : absolute;
top : 40px;
left : 400px;
z-index : 100;
text-align : center;
border : 2px solid black;
}
And the HTML is
<html>
<head>
<title>Testing</title>
<link href="basic.css" type=text/css rel=StyleSheet>
</head>
<body>
<div id='character'>
<a href=''>Carly Johnson, Black Fury Cliath Ragabash<span>This garou is a hero</span></a>
<a href=''>Melissa Manhunter, Black Fury Cub Ahroun<span>This garou is a hero</span></a>
<a href=''>Reaver, Black Fury Fostern Ahroun<span>This garou is a hero</span></a>
<a href=''>Tal Leagallen, Black Fury Cub Theurge<span>This garou is a hero</span></a>
<a href=''>The Body, Black Fury Cliath Ahroun<span>This garou is a hero</span></a>
<a href=''>Coryus Flameliuqide, Bone Gnawer Cub Ragabash<span>This garou is a hero</span></a>
<a href=''>Desiré, Bone Gnawer Cliath Philodox<span>This garou is a hero</span></a>
<a href=''>Jillly Sees Things Gillian McGregor, Bone Gnawer Fostern Galliard<span>This garou is a hero</span></a>
<a href=''>Napoleon, Bone Gnawer Cliath Theurge<span>This garou is a hero</span></a>
<a href=''>Rob Rouge, Bone Gnawer Cliath Theurge<span>This garou is a hero</span></a>
</div>
</body>
</html>
Alternativly, it can be seen in action at www.bluepelt.net/test.htm
Thanx in advance for any assistance.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 6:27:22
You can see the work in progress that I want to use this technique for at
www.bluepelt.net/new.php
You can also see another problem there with this construct, the floating text can scoll of page.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 6:59:00
Thanx for the tip.
I made sure my page validates now, including the css. While that was usefull just by itself, it still doesn't work properly in IE.
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 7:10:15
Hi, not sure if this makes a difference or not, but you have way too many spaces in some of your css styles.
Example a
div#character a
{
display : block;
color : black;
margin : 0 0 1px;
text-decoration : none;
}
Example b
{
display: block;
color: black;
margin: 0 0 1px;
text-decoration: none;
}
Above in example b is how your code should be set up. Remember that even though validators pick up MOST errors, even the vaildator isn't exempt from picking up some coding errors. Try fixing your code to how I have the example, test it and then see if this works out for you.
There should be no spaces between your these two things, display: your colon should be right after the word.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 7:32:12
Okay, I'll try that.
As a C++ programmer, I am used to spaces, tabs and whitespaces having no code effect. Don't know how that works with css.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 7:35:32
Fixed my code to this
div#character
{ position: relative;
left: 10%;
width: 80%;
height: 700px;
z-index: 100;
font: 16px Verdana;
}
div#character a
{
display: block;
color: black;
margin: 0 0 1px;
text-decoration: none;
}
div#character a:hover
{
color: #1010FF;
}
div#character a span
{
display: none;
}
div#character a:hover span
{
font-family: Papyrus, MS Sans Serif, Sans Serif;
display: block;
position: absolute;
top: 40px;
left: 400px;
z-index: 100;
text-align: center;
border: 2px solid black;
}
But it didn't help
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 8:37:04
div#character
{ position: relative;
left: 10%;
width: 80%;
height: 700px;
z-index: 100;
font: 16px Verdana;
}
div#character a
{
display: block;
color: black;
margin: 0 0 1px;
text-decoration: none;
}
div#character a span
{
display: none;
}
div#character a:hover
{
color: #1010FF;
}
div#character a:hover span
{
font-family: Papyrus, MS Sans Serif, Sans Serif;
display: block;
position: absolute;
top: 40px;
left: 400px;
z-index: 100;
text-align: center;
border: 2px solid black;
}
Try the above, I think it might have something to do with the order that you have your code in.
Order should be
Link
visited
hover
active
So hover should actually come after the a style. Though plain a isn't used too much, it should actually come before hover. I'll check back to see if this helps. Try reading up on the pseudo classes http://www.juicystudio.com/tutorial/css/pseudo.asp
Not sure if this is the problem, but it might be.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 8:41:45
I tried it, but it din't work.
I'll read up on the pseudo things asap. Thanx
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 8:57:05
Read THIS again. It states that you need to use a span element inside of the actual links somehow. I have only scanned the article (company coming for dinner tonight, so I have uhmm cleaning to do, lol) Read this again, and take notes on things in there on how to do this. I see you are validated, but, unless I'm missing somehting in your code, I did not see any spans in there?
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/18/2004 9:00:23
I'll read up as soon as I can. Point of fact is, I have my lady friend coming over, and thus little time left myself as well.
Your help is appreciated, thanks.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/19/2004 6:07:11
nd thus not really available to it's target group) so it will contain some faults.
Now, all I need to figure out is to have the text remain at the same position, no matter how far down the page is scrolled, right now, it disappears if the user scrolls down to far.
Thanx for the help.
| |
|
|
|
caz
Posts: 3468
Joined: 10/10/2001
From: Somewhere south of Chester, UK
Status: offline
|
RE: pop up image on mouseover using css - 11/19/2004 7:10:24
I believe that he is working on it now - 'cos it keeps changing. But thanks for asking Deb, it does look as if he has cracked it. I think that the current problem is positioning the popup with image as well as text.
This could be the source of the problem now ( going below the fold on scrolling)
div#character a:hover img.popup
{
border : 0px;
position : relative;
height : 200px;
width : 200px;
border : 1px solid #000000;
}
Things are changing, so I could be wrong.
Edit: the code was changed to this
div#character a:hover img.popup
{
display : block;
position : absolute;
top : 10px;
left : 450px;
z-index : 100;
width : 200px;
height : 400px;
border : 0px;
}
I'd like to know the reasoning used too, especially because this site is combining CSS with tables.
< Message edited by caz -- 11/19/2004 9:35:20 >
_____________________________
Do not meddle in the affairs of cats, for they are subtle and will dance, or more on your keyboard.
Cheshire cat. www.doracat.co.uk
I remember when it took less than 4hrs to fly across the Atlantic.
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 11/19/2004 7:34:17
Yeah, you are right.
I cracked the problem of the the text display in IE.
Now I am trying to find a way to position some text below an image.
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 11/19/2004 7:36:42
Can you explain what it was and how you found it? Helps others who migh search this thread in the future for some help. Thanks.
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
Crimson Rider
Posts: 14
Joined: 11/10/2004
Status: offline
|
RE: pop up image on mouseover using css - 1/1/2005 13:24:28
Hi,
I've been working on it still.
I now have a class working that displays the popup excactly the way I want it. I'll post the code Í've used to do that when I can. The problem with IE was solved indeed, basicly by enabling line after line to take effect until I found the line that messed things up.
Thanx for the help so far, the site is coming along nicely, we'll be updating the graphics next.
| |
|
|
|
c1sissy
Posts: 5079
Joined: 7/20/2002
From: NJ
Status: offline
|
RE: pop up image on mouseover using css - 1/1/2005 18:46:41
Hi CR,
I'm thrilled for you that things are working out.
One of the things that is recomended when you have problems is to strip your code down and re add things to find what is causing the problem, time consuming I know, but its supposed to work good.
Anxious to see your site when you finish, please post for us to see,
Have a happy new year!
_____________________________
Deb-aka-c4Ksissy
high panjandurum and alpha female of the silverback tribe
As decreed by Jesper 5-24-2003.
The only stupid question is... the one that is never asked!!
http://directory.css-styling.com
http://fmsforum.com
http://positioniseverything.net/
http://www.tanfa.co.uk/
| |
|
|
|
TomH
Posts: 67
Joined: 1/23/2005
From: Pittsburgh, Pennsylvania USA
Status: offline
|
RE: pop up image on mouseover using css - 1/30/2005 18:26:28
quote:
I recently discovered how to get an image to pop up on mouseover using only css. You can see it here http://moneytreesystems.com/css/picpopup.html
I'm fairly new to FP and have never used CSS... my question is what about a mix of shapes and sizes? This would be great for my photo page but the photos vary in size (some squarish, most rectangular with small variations in height/width). Will I have to fine tune each one.
Remember I know diddly about CSS other than what the letters stand for.
In IE my horiz slideshow works fine, but in NS and FF it just keeps on going till my page is a yard wide.
Don't laught at the domain name, at least it's not www.webmasteroftheworld.com
Thanks in advance.
Thomas
"Always tell the truth, it will gratify some of the people and astonish the rest."
| |
|
|
|
TomH
Posts: 67
Joined: 1/23/2005
From: Pittsburgh, Pennsylvania USA
Status: offline
|
RE: pop up image on mouseover using css - 1/30/2005 18:39:41
Son of a gun, the next section I went to had this posted:
quote:
I usually make a table which serves as a container for the gallery. Specifying the width of the table helps keep the gallery from extending beyond a browser window. I usually center the table and set the width to 90 - 95% or a suitable, fixed pixel size. The goal is to minimize forcing visitors to have to scroll horizontally to see everything on the page. For this very reason, it is also important not put too many thumbnail images horizontally on each row within the gallery. If you are using a CSS layout you could equally use a 'div' of a specified width as a container.
Haven't tried it yet but that may solve the photo galley problem in NS and FF.
Thomas
(update) Either they pushed past the table or I did it wrong, most likely the latter.
< Message edited by TomH -- 1/30/2005 19:32:46 >
| |
|
 New Messages |
 No New Messages |
 Hot Topic w/ New Messages |
 Hot Topic w/o New Messages |
 Locked w/ New Messages |
 Locked w/o New Messages |
|
Post New Thread
Reply to Message
Post New Poll
Submit Vote
Delete My Own Post
Delete My Own Thread
Rate Posts
|
|
|
Printable Version 
)
