pop up image on mouseover using css (Full Version)

All Forums >> [Web Development] >> Cascading Style Sheets and Accessibility



Message

Shirley -> 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




c1sissy -> 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!



Crimson Rider -> 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 -> 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



Crimson Rider -> 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 -> 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 -> 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.



caz -> RE: pop up image on mouseover using css (11/18/2004 6:50:26)

Checking with the validator to catch your html and css problems is a handy first step in troubleshooting.
bluepelt test page

You do not have a doctype declaration, which is throwing IE into quirks mode - Eric Meyer does, which is why it works for him ( I suspect[;)])



Crimson Rider -> 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 -> 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.



Crimson Rider -> 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.



c1sissy -> RE: pop up image on mouseover using css (11/18/2004 7:33:25)

Let us know how it works out.



Crimson Rider -> 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 -> 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.



Crimson Rider -> 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 -> 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?



Crimson Rider -> 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.



c1sissy -> RE: pop up image on mouseover using css (11/18/2004 9:25:43)

No problem CR. Enjoy your day! Keep us updated as you go along as to what you find out.



Crimson Rider -> 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.



c1sissy -> RE: pop up image on mouseover using css (11/19/2004 6:58:23)

Does this mean that you have sovled some of the problem?



caz -> 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.



Crimson Rider -> 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 -> 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.



Crimson Rider -> 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 -> 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!



TomH -> 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 -> 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.



jaybee -> RE: pop up image on mouseover using css (1/30/2005 19:41:00)

Tom it's something to do with the FP album.

Can I suggest you download the freebie Web Album Generator which produces valid xhtml code and css. It works in all the browsers I've tried.

Have a play with it and load it into a test page on your site.



TomH -> RE: pop up image on mouseover using css (1/31/2005 11:50:12)

quote:

Can I suggest you download the freebie Web Album Generator


Of course you can [:)]

I downloaded it just now but it will be a while before I can see how it works. (gotta work).
I don't suppose there is a link on how to get it into FP02?
(and will it 'publish' with the site or do I have to FTP it? )

btw, I am fairly conversant with HTML4.0 but I see links referencing HTML4.1...
Is there a big difference?

Thomas (as it says to the left, I really am a beginner at this.)



TomH -> RE: pop up image on mouseover using css (2/5/2005 3:12:26)

Hi again,

I downloaded Web Album Generator and the 'look' of the slideshows is just what I wanted. [:)]
Is there a way to 'drop it' into FrontPage tho?
Could it be a 'web component'? New at all this and need my hand held for a while.

Thomas

My 'personal' page



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.0625