Re: FN-FORUM: CSS, Layers and Mapping

date posted 10th January 2006 11:09

There's another way you could do it with CSS without any DHTML/
Javascript.

Put the pictures in an tag. make sure you've set:

display: block;
position: relative;

Make sure the image is within the tag and also that the div
containing the 'tip' is within the tag as well.

Make sure the tip div has the following attirbute set

position: absolute;

And set left and top to get the appropriate positions.

Then use CSS to show/hide the tip div. Assuming it's got a class of
'tip'

a .tip{
display: none;
}

a:hover .tip{
display: block;
}

So you'll end up with HTML / CSS a bit like this:

a.holder {
display: block;
position: relative;
height: 100px;
width: 100px;
}

a.holder .tip{
position: absolute;
display: none;
top: 50px;
left: 50px;
background-color: #ccc;
}

a.holder:hover .tip{
display: block;
}




tip


You'll probably need to tweak it a bit, but that should do the job.

Richard
http://www.richardquickdesign.com


On 10 Jan 2006, at 11:08, Lorna McArdle - Spinette Designs wrote:

>
> Thanks for all the answers so far all were relevant - but I thought
> there
> would be code for HTML that when you roll over an image text would
> appear to
> explain what the image was. (I Have googled which is how I came up
> with
> layers being on or off)
>
> I have done them as layers but feel there was a better way.
>
> Plus I now have the problem of one of the layers being on when you
> first go
> into the page. Then works as it should when you roll over and off
> the image,
> Has anyone else had this problem and how did they fix it.
>
> Lorna
> ----- Original Message -----
> From: [EMAIL REMOVED]
> To: [EMAIL REMOVED]
> Sent: Tuesday, January 10, 2006 9:43 AM
> Subject: Re: FN-FORUM: CSS, Layers and Mapping
>
>
>>
>> This is a good article.
>>
>> I think you can use ImageReady for image maps and rollover effects.
>>
>> Andrew
>>
>>
>>>
>
>
>
> --
> Freelancers, contractors earn more with Prosperity4
> Call 0870 870 4414 or visit www.prosperity4.com
> and benefit from Inland Revenue approved expenses today.
>
> To advertise here: http://www.freelancers.net/advertising.html
>
>