Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

on hover, pop up. Is it possible in CSS 2

Status
Not open for further replies.
benluke4

benluke4

Technical User
Jan 27, 2005
127
GB
Hi,

im wondering if it is possible to do the following.

on mousover an image - show pop up box describing the image.

Is this possible using css? and what am i looking at to achieve it?

any advice appreciated

Thanks

Ben
 
Sort by date Sort by votes
Popup window? No.
Popup box? Yes.
Popup box at a certain location? Easy.
Popup box that appears to follow the mouse while over the picture? Not with just css, css and javascript together can help.
Popup box by each picture hovering in over other stuff? Yes, with a little ingenuity.
Simple popup with text about the pic? Easy.
Code: 
<img src="myImg.jpg" alt="image of me" [b]title="This is a description of the picture which will for a while hover over the picture while I am hovering over it with the mouse." />
 
Upvote 0 Downvote
Thanks Vragabond,

ok, basically on mouseover a box to appear saying this is an image of me etc, not just using the alt tag.

I think ill need javascript and css, can anybody point me in the direction of any tutorials which might help

thanks
 
Upvote 0 Downvote
Look into using javascript to change the style.display properties from none to block for a div.
:)
 
Upvote 0 Downvote
thanks that got me on the write track, i now have the following which is working nicely, but instead of onclick how do i make the div appear on mousover and hide on mouse out?

Code: 
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function toggle(el)
{
myEl = document.getElementById(el);
myEl.style.display = (myEl.style.display == 'none') ? 'block' : 'none';
}
</script>
</head>
<body>
<div id="show" style="display: block;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');"><img src="logopoint.gif" width="14" height="17" border="0"></a></div>
<div id="hide" style="display: none;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');">Close</a></div>
<div id="a" style="display: none;">This is my logo</div>
</body>
</html>

thanks

Ben
 
Upvote 0 Downvote
cheers philote, got that looking for someting using mousover images

tahnks anyway
 
Upvote 0 Downvote
have a play with this
Code: 
<script>
function showhide(div){
	oDiv = document.getElementById(div);
	if(oDiv.style.display == "none"){
		oDiv.style.display = "block";
	}else{
		oDiv.style.display = "none";
	}
}
</script>
<div style="display:none;position:absolute;top:50px;" id="div1">
Popup stuff here
</div>
<a href="#" onmouseover="showhide('div1')" onmouseout="showhide('div1')">Roll over me</a>
 
Upvote 0 Downvote
or as benluke said the function could look like this
Code: 
function showhide(div){
	oDiv = document.getElementById(div);
	oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";
}
not done it like that before lol cheers ben (star for you ;))
 
Upvote 0 Downvote

guitardave,

That sort of code compaction is using something called the ternary operator (also called the trinary operator, but far less often).

It is basically a smaller way of doing an if / else block. The syntax is:

Code: 
(expression) ? true case : false case

So instead of this:

Code: 
if (var1 == 'abc') {
   var2 = '123';
} else {
   var2 = '456';
}

You could write this:

Code: 
var2 = (var1 == 'abc') ? '123' : '456';

With regards to the code in your last post, if you really wanted to compact it even more, you could go so far as to do the assignment and the ternary in one line:

Code: 
function showhide(div){
	(oDiv = document.getElementById(div)).style.display = (oDiv.style.display == "none") ? "block" : "none";
}

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Cool! Now my code will be unreadable by my collegues, making me imposuble to replace or fire woohahahaha..
ahem.
Cheers
 
Upvote 0 Downvote
note:
Using vbscript... (or VB / VBA)

you can do the same with:
X = iif("expression", "true case", "false case")

As opposed to:
If "expression" Then
X = "true case"
Else
X = false case"
End If

You can complicate either version even further by nesting the ternary operators within Each other...

X = A or B
Y = 1 or 2
...
var Z = (X == 'A') ? {(Y == '1') ? 'Ax1' : 'Ax2'} : {(Y == '1') ? 'Bx1' : 'Bx2'};


Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
Upvote 0 Downvote
CubE101: You CANNOT do it with VBScript - it doesn't have the iif function (VB does). I've caught myself (painfully) with that error more than a few times. For most situations you can write your own iif function like this:
Code: 
function iif(cond,tv,fv)
  if cond then iif = tv else iif = fv
end function
There ARE limitations to this method the the VB iif function does not have, but I haven't hit them in normal use.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
whoops, your right, I bet i had made my own... along with the Split function :-/

Sorry...

Thanks for the correction Tracy

Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
Upvote 0 Downvote
along with the split function"? VBScript DOES have a split function, I use it all the time.


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
maybe that was vba... (though I think it works in newer versions)
(I get them confused from time to time...)
You would think they would standardise them to all work the same...

Visit My Site
PROGRAMMER: (n) Red-eyed, mumbling mammal capable of conversing with inanimate objects.
 
Upvote 0 Downvote
Miscrosoft and standardize are mutually exclusive!


Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]
 
Upvote 0 Downvote
You really don't need all that JS at all.. check out what I have going on at (mouse over the middle nav bar)

Here's a sample of one of the items to look at (this is in the div id="menubar"):

<a href="/Merchant2/merchant.mvc"><img src="/img/shoppingnav.gif" alt="Shopping" width="100" height="30"><div>Clicking on the Shopping Button will take you into that part of our site. Once there you can view our ferret products, add them to your cart and make your purchase. It is just that easy!</div></a>

here's the CSS that makes it work:

div#menubar a div{
display: none;
}

div#menubar a:hover div{
display: block;
font-size: 12pt;
background-color: #FFFFFF;
font-style: italic;
position: absolute;
top: 89px;
left: 312px;
width: 446px;
height: 116px;
margin:3px 5px 5px 5px;
padding: 3px 3px 3px 4px;
text-decoration: none;
color: #000000;
font-weight: bold;
}

Now, this can be stripped down a bit, cuz as you see on the page, I added color (I hate the colors.. the boss told me to). You can refine it to look like this:

div#menubar a div{
display: none;
}

div#menubar a:hover div{
display: block;
position: absolute;
top: [whateveryouwant];
left: [whateveryouwant];
width: [whateveryouwant];
height: [whateveryouwant];
margin: [whateveryouwant];
padding: [whateveryouwant];
text-decoration: none;
}

You can make the positioning relative, but I'll warn you that that will screw up the spacing to the right of your image element. I would just keep it absoluted. Here's a fully revised form of my code that you should be able to use:

XHTML:

<div class="commentedImg">
<a href="#"><img width="" height="" alt="" /><div>This is a picture of me</div></a>
<a href="#"><img width="" height="" alt="" /><div>This is another picture of me</div></a>
<a href="#"><img width="" height="" alt="" /><div>This is yet another picture of me</div></a>
</div>


CSS:

div#commentedImg a div{
display: none;
}

div#menubar a:hover div{
display: block;
position: absolute;
top: [whateveryouwant];
left: [whateveryouwant];
width: [whateveryouwant];
height: [whateveryouwant];
margin: [whateveryouwant];
padding: [whateveryouwant];
text-decoration: none;
}

The simple explanation for this is that the code always exists, but just isn't displayed. When it is rolled over, however, it will be displayed.
 
Upvote 0 Downvote
hmmm.. it would probably be good if I read the other posts.. cuz this is the same as something you already said you didn't want ;x

sorry
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
319
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
398
spamjim
spamjim
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
656
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
338
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
267
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top