Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Image map to control CSS background?

    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?


  • #2
    Regular Coder BonRouge's Avatar
    Join Date
    Mar 2006
    Location
    Sendai, Japan
    Posts
    328
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'd suggest using a list instead. Position the list items absolutely in the appropriate places and style the list items with CSS.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    I really think you're over-complicating things but this should do the job.

    Code:
    [...]
    <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.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Quote Originally Posted by Arbitrator
    I really think you're over-complicating things but this should do the job.

    Code:
    [...]
    <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?

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by lazerbrains
    <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:

    Quote Originally Posted by Problem Explanation
    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:

    Code:
    table#ProcareGirl {
      width: 606px;
      border-collapse: collapse;
      border: 0;
      padding: 0;
      background: url("../images/ProCare_Girl_Nav_03.gif") left top no-repeat;
      }
    Code:
    
    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.
    Last edited by Arbitrator; 05-09-2006 at 11:38 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •