...

View Full Version : Image map to control CSS background?



lazerbrains
05-09-2006, 06:48 PM
I have a background image that I am looking to have change on rollover of a hotspot on an image map. Basically, I have a table that has a background image. I am using a transparent gif on top of this to create the hot spots. I need to figure out how to reload the background image when you rollover one of the hotpspots. And have it reset when you rollout. Here is the code I have so far:

CSS Background:

.bkd_sub_prod {
background-image: url(../images/ProCare_Girl_Nav_03.gif);
background-repeat: no-repeat;
background-position: left top;
}

HTML for Image Map:

<table width="606" align="left" cellpadding="0" cellspacing="0" border="0">
<map name="Map">
<area shape="circle" coords="220,101,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/3">
<area shape="circle" coords="244,240,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/1">
<area shape="circle" coords="372,117,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/2">
</map>
<tr>
<td valign="top" align="left" width="606" height="300" class="text"><img width="606" border="0" usemap="#Map" src="<%= FUSEBOX("webroot") %>images/procare_girl_trans.gif"></td>
</tr>
</table>

How would I go about making the image map hot spots to change the CSS Background?

:confused:

BonRouge
05-09-2006, 06:58 PM
I'd suggest using a list instead. Position the list items absolutely in the appropriate places and style the list items with CSS.

Arbitrator
05-09-2006, 07:20 PM
I really think you're over-complicating things but this should do the job.


[...]
<script type="text/javascript">
function bgChange(tablebg) {
document.getElementById("TABLEID").style.background = "url(\"" + tablebg + "\")";
}
function bgRestore() {
document.getElementById("TABLEID").style.background = "url(\"ORIGINALTABLEBGURL\")";
}
</script>
[...]
<table id="TABLEID">
[...]
<area shape="circle" coords="220,101,16" href="foo"
onmouseover="bgChange('NEWBGURL');" onmouseout="bgRestore();">
[...]Also, the following attributes are deprecated and shouldn't be used: width, align, cellspacing, cellpadding, border, valign, and height. Instead use CSS width, text-align, border-collapse, padding, border, vertical-align, and height, respectively.

lazerbrains
05-09-2006, 08:16 PM
I really think you're over-complicating things but this should do the job.


[...]
<script type="text/javascript">
function bgChange(tablebg) {
document.getElementById("TABLEID").style.background = "url(\"" + tablebg + "\")";
}
function bgRestore() {
document.getElementById("TABLEID").style.background = "url(\"ORIGINALTABLEBGURL\")";
}
</script>
[...]
<table id="TABLEID">
[...]
<area shape="circle" coords="220,101,16" href="foo"
onmouseover="bgChange('NEWBGURL');" onmouseout="bgRestore();">
[...]Also, the following attributes are deprecated and shouldn't be used: width, align, cellspacing, cellpadding, border, valign, and height. Instead use CSS width, text-align, border-collapse, padding, border, vertical-align, and height, respectively.


Alright, bear with me. Not too familiar with Javascript. Here are the changes that I have made according to your instructions.


1) I added:

<script type="text/javascript">
function bgChangePatient (tablebg) {
document/getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")";
}
function bgRestore () {
document.getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_03.gif")";
}
</script>

Not sure if "(tablebg)" should be a link to something?


2) Added table ID name:

<table width="769" border="0" id="ProcareGirl" align="center" cellpadding="0" cellspacing="0">
<tr><td class="bkd_sub_prod">

3) Modified one of my hotspots with the new code:

<table width="606" align="left" cellpadding="0" cellspacing="0" border="0">
<map name="Map">
<area shape="circle" coords="220,101,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/3" onmouseover="bgChangePatient("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")"; onmouseout="bgRestore();">
<area shape="circle" coords="244,240,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/1">
<area shape="circle" coords="372,117,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/2">
</map>
<tr>
<td valign="top" align="left" width="606" height="300" class="text"><img width="606" border="0" usemap="#Map" src="<%= FUSEBOX("webroot") %>images/procare_girl_trans.gif"></td>
</tr>
</table>

And all of this does nothing. Not sure where I went wrong. Any ideas?

Also, wouldn't it be easier to just make a couple different Background classes in CSS and change them out?

Arbitrator
05-09-2006, 11:24 PM
<script type="text/javascript">
function bgChangePatient (tablebg) {
document/getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")";
}
function bgRestore () {
document.getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_03.gif")";
}
</script>

Not sure if "(tablebg)" should be a link to something?

<table width="769" border="0" id="ProcareGirl" align="center" cellpadding="0" cellspacing="0">
<tr><td class="bkd_sub_prod">

<area shape="circle" coords="220,101,16" href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/3" onmouseover="bgChangePatient("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")"; onmouseout="bgRestore();">

And all of this does nothing. Not sure where I went wrong. Any ideas?

Also, wouldn't it be easier to just make a couple different Background classes in CSS and change them out?Heh, okay. You're clearly not familiar with JavaScript. You have the following problems:


bgChangePatient (tablebg) and bgRestore (): These are the names of the functions and are denoted like this: functionName(). Notice that there are no spaces between the name and parentheses.

document/getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")"; and document.getElementById("ProcareGirl") .bkd_sub_prod = "url("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_03.gif")": You totally altered these. The ONLY things you need to alter are the things that were capitalized: the table IDs. You also changed a period to a slash and got rid of the style references...

bgChangePatient(tablebg): This is the reason you made the URL a parameter in your area tag. That information is converted to the variable named tablebg and is used to directly change the CSS to that URL in the function.

onmouseover="bgChangePatient("<%= FUSEBOX("webroot") %>images/ProCare_Girl_Nav_Patient.gif")";: The string must be enclosed in single quote marks not double otherwise the browser gets confused between them and the double quote marks closing the onmouseover attribute's value. Also, you moved the semi-colon outside the closing double quote mark which was supposed to close the attribute value. In addition, spelling out the entire URL isn't required. Spell it out like you would in a normal image tag.Now, I'll explain what the script is doing:

<area shape="circle" coords="220,101,16" href="foo" onmouseover="bgChange('NEWBGURL');" onmouseout="bgRestore();">

When the user mouses over the element (the area denoted by the coordinates in this case), the information NEWBGURL is sent to the function bgChange.

function bgChange(tablebg) {
document.getElementById("TABLEID").style.background = "url(\"" + tablebg + "\")";

bgChange() changes this information (parameter: your new BG URL) to the variable tablebg. The next line changes the CSS (.style.) of the element denoted by TABLEID (getElementById("TABLEID")). The CSS property being targeted is the background property (.style.background). This property will equal in essence background: url("tablebg"); or more directly background: url("NEWBGURL");. The slashes in there are because the double quote marks need to be escaped (\) otherwise the script gets confused since those marks are also used to close string (non-number) values.

onmouseout="bgRestore();"

function bgRestore() {
document.getElementById("TABLEID").style.background = "url(\"ORIGINALTABLEBGURL\")";
}

When the user's mouse leaves the area, the background is changed to ORIGINALTABLEBGURL in the same manner. The reason this URL isn't set as a parameter is because it will be the same for all of the rollovers. I assumed that you would want a unique NEWBGIMAGE for each individual rollover hence the parameter; it'll allow you to use a different NEWBGIMAGE for each area tag.

The end result:


table#ProcareGirl {
width: 606px;
border-collapse: collapse;
border: 0;
padding: 0;
background: url("../images/ProCare_Girl_Nav_03.gif") left top no-repeat;
}
td.text {
width: 606px;
height: 300px;
text-align: left;
vertical-align: top;
}
a img {
border: 0;
}

<script type="text/javascript">

function bgChange(tablebg) {
document.getElementById("ProcareGirl").style.background = "url(\"" + tablebg + "\") left top no-repeat";
}
function bgRestore() {
document.getElementById("ProcareGirl").style.background = "url(\"..\/images\/ProCare_Girl_Nav_03.gif\") left top no-repeat";
}

</script>

<table id="ProcareGirl" align="left">
<!-- deprecated align attribute remains since I don't know what you're trying to align or align to -->

<tr><td class="text">

<map id="Map" name="Map">
<area shape="circle"
coords="220,101,16"
href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/0"

onmouseover="bgChange('../images/Procare_Girl_Nav_Patient.gif');"
onmouseout="bgRestore();">
<area shape="circle"
coords="244,240,16"
href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/1">
<area shape="circle"
coords="372,117,16"
href="http://djortho2.pyron.local/procare/index.asp/fuseaction/products.main/type/2">
</map>

<img style="width: 606px;" usemap="#Map" src="../images/procare_girl_trans.gif">

</td></tr>

</table>And no you can't use pure CSS unless you don't want it to work in Internet Explorer. I miss anything? Other than explaining parts of this you might still not understand, I can't really help you further without seeing a live version of what you're trying to do.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum