PDA

View Full Version : Mouseover (my apologies if in wrong section)



Bean824
Jan 27th, 2009, 12:58 AM
Hi everyone. Firstly, sorry if this is in the wrong section, I'll repost it if it is.

Basically, I'm coding a website for my ICT A Level coursework, and I want to be a bit flashy with it. The website is based on a travel agents, so I would like a world map showing all of the destinations they travel to.

My idea was for when the user moves their mouse over a city (would be highlighted by a dot), an information box would appear. This would contain an image of the city and a little information about it. The dot itself would be a hotspot that would link to page solely about that city.

I already have some code that I've found on the internet that I can use for the information box, however, this is in use across the whole image, where I need the information box limited to showing only when the mouse is hovering over that hotspot. Another problem is that I need about 10+ of these information boxes showing when each of their specified hotspots is hovered over. I have no idea how to do either. Could anyone help me?

Thanks everyone

~Bean824

sea4me
Jan 27th, 2009, 03:06 AM
Tutorial to make an image map:

http://www.htmlcodetutorial.com/images/images_famsupp_220.html


The hover thing would be similar to this...

CSS:

/* popup properties */
a.info{
position:relative; /*this is the key*/
z-index:24; background-color:red;
color:#000;
text-decoration:none;
font-size: 11px;
font-weight: normal;
}

a.info:hover{z-index:90; background-color:#ff0}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
z-index: 90;
top:2em; left:1em; width:25em;
border:1px solid #0cf;
background-color:#cff; color:#000;
text-align: left
}
HTML:

<a href=# class=info>YOUR WORDS<span>YOUR POPUP details!!</span></a>

Hope it helps! :thumbsup:

Bean824
Jan 27th, 2009, 11:40 AM
Thanks for your help, but i'm not sure how I could intregrate this into my website. Could you please explain where the two pieces of code would go, etc?

BoldUlysses
Jan 27th, 2009, 02:59 PM
Hi Bean824,

There are a couple of ways to achieve your desired effect. One, and probably the most common, is by using Javascript. Try doing a Google search for "javascript image map mouseover" or something similar. Alternatively, if you decide to go that route, you could ask a moderator to move this post to the Javascript forum. Chances are very good that you'll find what you're looking for over there.

The other way, demonstrated by sea4me above, is to use what's called a remote rollover in CSS. This takes advantage of the characteristic of CSS that allows you to dynamically affect nested items on hover. In other words, if, in the HTML, one element is nested inside other (like the <span> inside the <a> in this case), CSS allows you to specify a change in a CSS property (like display in this case) for the nested element (<span>) when the parent element (<a>) is rolled over.

To see a remote rollover in action click here (http://www.sufferndesign.com/helping/site126.html).

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 126</title>

<style type="text/css">

#map {
position:relative;
width:500px;
height:350px;
border:3px solid #000;
}

#background {
width:500px;
height:350px;
}

#locations {
margin:0;
padding:0;
list-style-type:none;
}

#locations li {
position:absolute;
display:block;
height:7px;
width:7px;
border:2px solid #f00;
}

#locations li span{
position:absolute;
display:none;
top:10px;
left:0px;
}

#location1 {
top:50px;
left:75px;
}

#location2 {
top:100px;
left:250px;
}

#location3 {
top:200px;
left:400px;
}

#locations li:hover span {
cursor:default;
display:block;
width:75px;
border:2px solid #000;
background:#fff;
}

</style>

</head>

<body>

<div id="map">
<img id="background" src="image1.jpg" alt="background image" title="" />
<ul id="locations">
<li id="location1"><span>Here is the first place.</span></li>
<li id="location2"><span>Here is the second place.</span></li>
<li id="location3"><span>Here is the third place.</span></li>
</ul>
</div>

</body>
</html>

Checks out in Safari and FF3; dunno about IE.

Bean824
Jan 27th, 2009, 08:02 PM
Thanks so much! You've really helped me there. There's just one more question, then I should be done!

In the example you gave, you used those red boxes. Would it be possible for me to create a link using them? So that the user can hover over the box to see the information, and then click the box as a link?

Thanks so much everyone.

BoldUlysses
Jan 27th, 2009, 08:13 PM
Absolutely it's possible. Check the link now (http://www.sufferndesign.com/helping/site126.html).

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 126</title>

<style type="text/css">

#map {
position:relative;
width:500px;
height:350px;
border:3px solid #000;
}

#background {
width:500px;
height:350px;
}

#locations {
margin:0;
padding:0;
list-style-type:none;
}

#locations li a{
position:absolute;
display:block;
height:7px;
width:7px;
border:2px solid #f00;
background:#fff;
}

#locations li a span{
position:absolute;
display:none;
top:10px;
left:0px;
width:75px;
border:2px solid #000;
background:#fff;
}

#location1 {
top:50px;
left:75px;
}

#location2 {
top:100px;
left:250px;
}

#location3 {
top:200px;
left:400px;
}

#locations li a:hover span {
display:block;
}

</style>

</head>

<body>

<div id="map">
<img id="background" src="image1.jpg" alt="background image" title="" />
<ul id="locations">
<li><a id="location1" href="#"><span>Here is the first place.</span></a></li>
<li><a id="location2" href="#"><span>Here is the second place.</span></a></li>
<li><a id="location3" href="#"><span>Here is the third place.</span></a></li>
</ul>
</div>

</body>
</html>

Checks out in FF3, Safari and IE7. IE6 isn't readily accessible to check. You'll notice the boxes are filled in now. For some reason IE was balking because they didn't have a background color. A way around this is to simply use a transparent PNG or GIF as the background image for the link (might work better if you'd want to have a circle around the cities anyway). That should satisfy IE.

jerry62704
Jan 27th, 2009, 08:57 PM
The popups don't work and the container is much bigger (longer) than the blue in IE6.

The white space is filled with the LI tags according to IEDeveloperTools.

Bean824
Jan 27th, 2009, 09:12 PM
Argh sorry again. Last time I promise! On the example you gave showing me the links it had all of the text in the information box showing as a link. Is it possible to just have part of that text as a link, or even better, none at all (leaving just the box as a link)?

I'm sorry having to keep asking for help, it's just I don't know CSS in detail at all, only enough to understand what's going on in the code and to code my own basic stylesheets! I really should get back to learning some.

Thanks for the quick replies!

BoldUlysses
Jan 27th, 2009, 09:17 PM
The easiest way is simply to add this code and style from there:


#locations li a{
position:absolute;
display:block;
height:7px;
width:7px;
border:2px solid #f00;
background:#fff;
text-decoration:none;
color:#000;
}

Bean824
Jan 27th, 2009, 09:23 PM
So I could use "text-decoration:none" and all of the hyperlinked text in the information box would become normal text? Or at least not be shown as hyperlinked text?

BoldUlysses
Jan 27th, 2009, 09:25 PM
Or at least not be shown as hyperlinked text?

Correct.

Bean824
Jan 27th, 2009, 09:29 PM
Ah that's fantastic. Thanks so much! Couldn't have asked for better help :)