473,735 Members | 1,878 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

css - hover over change background of entire map

Hi there,

I've got a gif with (highly) irregular shapes (lots of jigsaw pieces)
that I want to map so that each piece is a link...
The pieces are currently just a frame drawing, but as they are hovered
over I want them to be coloured in. I thought the easiest way to do
this would be to change the background image of the entire map (since
it's a bit of a pain trying to select each piece out of the image and
colour them seperately...), with a seperate image showing one of the
pieces coloured in at a time. Is this possible?
Basically, I want to know if it's possible to have a hover over a link
change the background of the entire map and not just that link...
The css (largely pilfered from Frank Manno's site - cheers :) ) is
currently as follows:
***
dl#jigsaw{
margin: 0;
padding: 0;
background: url('images/jig_frame_small .gif') no-repeat top
left;
height: 105px;
width: 354px;
position: relative

}
dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display:

none; }
dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }

dd#cms{ top: 0px; left: 0px; }
dd#cms a{ position: absolute; width: 73px; height: 69px;
text-decoration: none; background-color:red;}
dd#cms a:hover{ position: absolute; background:
url('images/jig_frame_small .gif') no-repeat top left;) }
***
This cms a:hover doesn't do anything!
the html looks like this:
***
<dl id="jigsaw">
<dt id="cms">1. Monitor</dt>
<dd id="cms"><a href="index.htm "></a></dd>
</dl>
***
Many thanks,
Chris

Feb 14 '06 #1
2 4539
Els
ch**********@ya hoo.com wrote:
Hi there,

I've got a gif with (highly) irregular shapes (lots of jigsaw pieces)
that I want to map so that each piece is a link...

The pieces are currently just a frame drawing, but as they are hovered
over I want them to be coloured in. I thought the easiest way to do
this would be to change the background image of the entire map (since
it's a bit of a pain trying to select each piece out of the image and
colour them seperately...), with a seperate image showing one of the
pieces coloured in at a time. Is this possible?

Basically, I want to know if it's possible to have a hover over a link
change the background of the entire map and not just that link...
Only if that entire map would really be contained within that link.
Could work with spans and absolute positioning, relative to the links
themselves which also would be have position:absolu te;.
The css (largely pilfered from Frank Manno's site - cheers :) ) is
currently as follows:

***
dl#jigsaw{
margin: 0;
padding: 0;
background: url('images/jig_frame_small .gif') no-repeat top
left;
height: 105px;
width: 354px;
position: relative

}

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display:

none; }
dd{ margin: 0; padding: 0; position: absolute; font-size: 85%; }

dd#cms{ top: 0px; left: 0px; }

dd#cms a{ position: absolute; width: 73px; height: 69px;
text-decoration: none; background-color:red;}

dd#cms a:hover{ position: absolute; background:
url('images/jig_frame_small .gif') no-repeat top left;) }
***

This cms a:hover doesn't do anything!

the html looks like this:

***
<dl id="jigsaw">
<dt id="cms">1. Monitor</dt>
<dd id="cms"><a href="index.htm "></a></dd>
</dl>
***


I'm not seeing how the above would be working for what you want, but
apart from that, you can't use an id twice in one page.
Try replacing the <dd id="cms"> with <dd id="cms2"> and change the
styles accordingly to see if that helps.

But hovering over the <a> in the <dd> will not cause the background
image to appear anywhere else than right there where you are hovering.

To make that happen, you'd need to add a <span> inside the <a>
element, and give that span a height, width, display:block, and
position (absolute, but relative to the link itself) and a background
image.

Problem with that is though, that this background image would cover
all the links that are earlier in the code, and be covered by all the
links later in the code. Or at least in one or two browsers that would
be the case, forgot which one(s).

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: Electric Boys - Mary In The Mystery World
Feb 14 '06 #2
Yes - you're entirely right, the span does cover up other links..
hadn't thought of that...

Just changing the background for each link would be better - will have
to dig out some better image manipulation kit other than paint I guess
....

Many thanks

Chris

Feb 14 '06 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

2
11267
by: Sugapablo | last post by:
Can anyone help me out with some code to change three table cells (<td>) when one is hovered over? I have a calendar grid where each day is made up of three table cells and I want all three to change color when any of the three are hovered over. I would prefer to do this with pure CSS if possible, but if Javascript is the only way...so be it. --
51
12242
by: madsgormlarsen | last post by:
I can not get hover effect on a TD to work in IE, it seams you can not have a hover on a td in IE? I have treid this body.section-2 td.current, body.section-2 td.submenu, body.section-2 td.bredtsubmenumellemrumhojre, body.section-2 td.bredtsubmenumellemrumvenstre {
13
12529
by: Gary | last post by:
I have a table with a form consisting of several checkboxes and I'm wondering if its possible to change the table row background color on mouseover or hover and make it stay that color when the checkbox in that row is selected? Poko
24
5440
by: fehays | last post by:
Hello, I'm having a problem with the css hover effect in IE. I have an <a> tag with the following CSS: a.subNavItem { display:block; color:#464645; padding:2px 7px 4px 6px; font-family:verdana,arial,helvetica,sans-serif;
2
3137
by: andrewtayloruk | last post by:
Hi, i'm pretty new to CSS and html so please go easy on me. I'm trying to make a menu, the idea is that when you hover over the images in the menu they glow. To do this i have set up the following in css ***CSS Document*** a.wallpaper_button {background:url(images/wallpaper_container.gif);} a.wallpaper_button:hover {background:url(images/wallpaper_container_on.gif);} a.screenshot_button...
3
11595
by: mfc1981 | last post by:
Hi. I need to access to the hover style of an element with javascript. How can i do this? Best regards Manuel
1
2421
by: darkzone | last post by:
Hi I saw this layout and wanted to try some thing similar, but I am unable to change the position of the vertical menu with out changing the position of the hole document and I don't really have a clue of how the css works in this one. Can any one help out?= link <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>...
4
2263
by: Sigilaea | last post by:
My previous post got squashed because m post is too long. Sorry for that: I have an AJAX page with a CSS menu at the top. My problem is the hover functionality stops working after someone clicks on one of the details in the main blue section. This only occurs in IE6. IE7 and FF work correctly. The URL to the page is: http://www.coralap.com/dies281css.aspx Steps to reproduce: 1. Mouse over the top menu and verify the hover works. 2....
1
2091
by: rupak | last post by:
I have an mouseover effect with css on hover, which change the image on hover through Css. It works with IE fine but have problem with Mozilla, as the background image not coming full on hover. If i add padding-top:10px; in Css it comes fine with Mozilla but IE padding is to much. Can you help me with the same a { background-image: none; padding: 10 0 0 0;
0
8965
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
8786
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
9466
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9202
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
8202
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6748
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4567
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3278
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2191
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.