...

View Full Version : picture info on mouse over



mikacruz
05-09-2008, 08:29 PM
Hello,
I would like to have a rectangle with information that appears when the mouse goes over the pictures of the gods at the link below. I tried
src="images/goddess_nephthys.gif"
but this did not work. thanks for your kind help!
http://www.sacred-egypt.com/Ancient%20Egypt/Gods%20and%20Goddesses/menu.html

jcdevelopment
05-09-2008, 10:58 PM
Not sure what you are trying to accomplish, do you want an alternate picture when you roll over the existing image.. like an image that talks about the god.. or are you looking for an alt tag?

harbingerOTV
05-09-2008, 11:09 PM
http://www.cssplay.co.uk/menu/balloons

sounds like you want a simple version of that.

jcdevelopment
05-09-2008, 11:38 PM
oh ok, that would be CSS visible:property...!

ccemmett
05-10-2008, 07:48 PM
If you just want a short text description you can use the title attribute

<img src="images/goddess_nephthys.gif" title="Nephthys, mother of Anubis">
which will display a little drop-down text box.

mikacruz
05-12-2008, 09:47 AM
hello,
Yes what ccemmett suggests is good enough but it takes a relatively long time to respond... any alternative?
thanks again

mikacruz
05-12-2008, 09:48 AM
harbingerOTV, yes a simple version of that would be great. Its much faster.

jcdevelopment
05-12-2008, 04:03 PM
a simple way of doing that might be something like this (if anyone has a better way please post or let me know if im doing this wrong or there is an easier way)



.picture1 a{
background-image:url(picture.gif);
background-repeat:no-repeat;
width:--px;/*however big*/
height:--px;/*however big*/
float:left;
padding:5px;
}

.picture1 a:hover{
background-image:url(hover-info-box.gif);
background-repeat:no-repeat;
width:--px;/*however big*/
height:--px;/*however big*/
position:absolute;
left:/*position it where you need it, like above the first image*/
top:/*position it where you need it, like above the first image*/
z-index:100;
}


Thats a simple way of doing it, and just name as many classes as you have pictures!
If you have any more questions dont hesitate!

harbingerOTV
05-12-2008, 10:08 PM
without individual classes and without javascript you can do this:



<a href="#x" class="img"><img src="image.jpg" width="" height="" /><span>Your description text</span></a>




a.img {
position: relative;
}

a.img span {
display: none;
position: absolute;
}

a.img:hover span {
display: block;
top: X;
left: X;
padding: 6px;
border: 2px solid #000;
background: #fff;
color: #000;
}


you'll need to set your left/right top/bottom to your liking. This would apply to every 'a' with a class of 'img' and every span inside each 'a.img'

Pretty close to what jcdevelopment had anyway, just without a background image.




[/code]

mikacruz
05-15-2008, 02:22 AM
thanks guys.. havent tried yet though..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum