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 Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Anybody wants to tackle this one

    hi,
    have an image map that works in my local browser just can't seem to get it working on my site.
    Here is what should happen:text on rollover turns text from white to green.
    pictures on rollover turn from dark to light.
    both text and pictures have url links attached to them which work fine just cannot get the other part to work.
    thanks in advance.
    Attached Files Attached Files

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Can you post the code you have that works on your local machine?

    Remember to post in between CODE tags.
    matt | design | blog

  • #3
    Regular Coder
    Join Date
    Jan 2009
    Posts
    193
    Thanks
    0
    Thanked 20 Times in 20 Posts
    Can you post a link if it is up on a live site?

  • #4
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    you guys thanks for the quick reaction to this post.
    here is the code that is working on my local browser.
    again thanks for the help.
    much appreciated.




    <HTML>
    <HEAD>
    <TITLE>D&D NEW ARRIVALS</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <!-- ImageReady Preload Script (D&D NEW ARRIVALS.psd) -->
    <SCRIPT TYPE="text/javascript">
    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    D_D_NEW_ARRIVALS_01_ImageMap_04_over = newImage("images/D%26D-NEW-ARRIVALS_01-ImageMa.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_14_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-03.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_05_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-04.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_15_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-05.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_16_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-06.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_17_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-07.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_20_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-08.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_18_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-09.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_06_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-10.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_19_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-11.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_07_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-12.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_08_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-13.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_09_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-14.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_10_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-15.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_01_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-16.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_11_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-17.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_03_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-18.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_12_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-19.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_02_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-20.jpg");
    D_D_NEW_ARRIVALS_01_ImageMap_13_over = newImage("images/D%26D-NEW-ARRIVALS_01-Imag-21.jpg");
    preloadFlag = true;
    }
    }

    // -->
    </SCRIPT>
    <!-- End Preload Script -->
    </HEAD>
    <BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
    <!-- ImageReady Slices (D&D NEW ARRIVALS.psd) -->
    <IMG NAME="D_D_NEW_ARRIVALS_01" SRC="images/D%26D-NEW-ARRIVALS_01.jpg" WIDTH=800 HEIGHT=600 BORDER=0 ALT="" USEMAP="#D_D_NEW_ARRIVALS_01_Map">
    <MAP NAME="D_D_NEW_ARRIVALS_01_Map">
    <AREA SHAPE="rect" ALT="Tamanu oil" COORDS="313,307,357,368" HREF="http://www.ddbeautyproducts.com/userimages/Tamanu-Oil-and-Soap(1187789).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-08.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Organic Slimming Oil Bio Eco cert" COORDS="253,443, 130,443, 133,593, 268,593, 266,443" HREF="http://www.ddbeautyproducts.com/userimages/French-Perfumes-Galimard-1747(1048454).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-11.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Natural Slimming Oil Organic Bio Eco Cert" COORDS="7,442, 123,443, 124,595, 6,596" HREF="http://www.ddbeautyproducts.com/userimages/French-Perfumes-Galimard-1747(1048454).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-09.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">

    <AREA SHAPE="poly" ALT="French perfumes by Galimard of Grasse france" COORDS="15,349, 250,349, 271,379, 212,418, 189,418, 190,434, 70,436, 48,412, 46,395, 4,394, 4,350" HREF="http://www.ddbeautyproducts.com/userimages/French-Perfumes-Galimard-1747(1048454).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-07.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="French Perfumes By Galimard of Grassee France" COORDS="15,247, 250,247, 250,342, 15,342" HREF="http://www.ddbeautyproducts.com/userimages/French-Perfumes-Galimard-1747(1048454).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-06.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Prickly pear cactus oil organic bio eco cert" COORDS="9,192, 11,206, 77,207, 77,221, 185,221, 185,207, 252,206, 251,184, 213,184, 214,177, 74,179" HREF="http://www.ddbeautyproducts.com/userimages/Cactus-oil--Prickly-Pear-Oil(1048433).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-05.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Prickly Pear Cactus oil bio organic eco cert" COORDS="110,5, 121,27, 106,37, 101,69, 104,73, 260,73, 260,5" HREF="http://www.ddbeautyproducts.com/userimages/Cactus-oil--Prickly-Pear-Oil(1048433).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-03.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Prickly Pear/Cactus oil bio organic eco cert" COORDS="102,76, 145,77, 147,176, 90,176, 67,175, 6,185, 6,5, 105,5, 112,23, 100,33, 97,58, 96,78" HREF="http://www.ddbeautyproducts.com/userimages/Cactus-oil--Prickly-Pear-Oil(1048433).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-21.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi de Luxe Precious oil" COORDS="512,502, 512,485, 655,485, 655,519, 666,525, 687,527, 689,544, 678,567, 673,576, 645,596, 519,596, 466,558, 466,546, 463,546, 465,527, 504,526, 504,509, 512,509" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-de-Luxe(681332).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-19.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi de luxe Oil Precious" COORDS="687,458, 691,548, 680,567, 680,592, 797,592, 794,454" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-de-Luxe(681332).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-17.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi de tahiti oil Travel packs" COORDS="653,440, 748,441, 748,425, 759,425, 759,409, 795,410, 795,385, 764,370, 617,370, 581,388, 581,403, 591,409, 625,408, 625,421, 626,420, 631,426, 643,427, 644,439" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-SkinHair-Travel(675367).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-15.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi Oil travel pack 30ml" COORDS="620,242, 624,366, 758,368, 758,244" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-SkinHair-Travel(675367).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-14.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Moroccan Argan oil" COORDS="560,181, 561,209, 635,208, 636,223, 719,223, 719,211, 795,210, 796,183" HREF="http://www.ddbeautyproducts.com/userimages/Moroccan-Argan-oil(1048420).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-13.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Moroccan Argan oil" COORDS="527,13, 527,80, 670,79, 671,5, 527,4" HREF="http://www.ddbeautyproducts.com/userimages/Moroccan-Argan-oil(1048420).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-12.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Moroccan Argan oil" COORDS="673,5, 675,180, 728,180, 792,180, 792,3" HREF="http://www.ddbeautyproducts.com/userimages/Moroccan-Argan-oil(1048420).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-10.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi Tiare Gardenia" COORDS="467,160, 464,153, 471,151, 469,133, 478,121, 489,124, 496,118, 504,128, 512,143, 531,125, 541,123, 546,126, 546,135, 531,154, 539,149, 558,157, 566,170, 555,177, 544,174, 553,186, 553,201, 547,205, 541,204, 544,215, 544,225, 540,235, 535,244, 526,252, 521,255, 513,252,
    501,246, 492,232, 487,220, 478,217, 494,198, 481,208, 472,212, 464,209, 456,210, 452,205, 450,200, 456,188, 463,181, 471,177, 479,176, 489,174, 483,170, 478,167" HREF="http://www.ddbeautyproducts.com/Tiare-Gardenia-Flower(1012817).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-04.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi Oil Natural" COORDS="318,197, 317,169, 452,170, 451,184, 448,189, 435,189, 436,204, 321,203" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-Body-Glow(674840).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-ImageMa.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="rect" ALT="monoi de tahiti (AO)" COORDS="316,234,358,297" HREF="http://www.ddbeautyproducts.com/Monoi-Appellation-dOrigine(674901).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-18.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi Oil Natural" COORDS="381,281, 381,252, 472,253, 472,289, 464,307, 489,347, 486,447, 383,452, 365,417, 362,342, 386,306, 382,298" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-Body-Glow(674840).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-20.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">
    <AREA SHAPE="poly" ALT="Monoi Miracle oil "The Original since 1942"" COORDS="342,480, 301,486, 304,507, 329,507, 328,521, 346,524, 349,546, 444,546, 446,525, 461,525, 467,506, 487,506, 487,495, 473,483, 455,482, 453,471, 349,471" HREF="http://www.ddbeautyproducts.com/userimages/Monoi-Body-Glow(674840).htm" TARGET="_self"
    ONMOUSEOVER="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01-Imag-16.jpg'); return true;"
    ONMOUSEOUT="changeImages('D_D_NEW_ARRIVALS_01', 'images/D%26D-NEW-ARRIVALS_01.jpg'); return true;">

    </MAP>
    <!-- End ImageReady Slices -->
    </BODY>
    </HTML>

  • #5
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Perla:

    Please remember to post your code in between CODE tags. It makes it much easier for us to read, and the easier it is for us to read, the easier it is for us to help you.

    My recommendation: Start over. The method you've chosen to accomplish what you want on your site is so far removed from the correct way that to debug it would not only be a mind-numbing exercise for us, it would encourage you to continue developing pages using ImageReady slices and JavaScript for rollovers, which is a bloated, inefficient, buggy, clunky way of bludgeoning the browser into displaying what you want.

    Here's what you need to do: Learn to hand-code using HTML and CSS. Take the "image map" you've developed in Photoshop, strip out the text and put it in the HTML file. Turn the rollover areas into images which you then place into links in <li> tags in the HTML. And so on.

    Here's an example site. And the code for said site:

    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 213</title>
    	
    	<style type="text/css">
    	
    		* {
    			margin:0;
    			padding:0;
    			border:0;
    		}
    		
    		body {
    			background-color:#000;
    			padding:15px;
    		}
    		
    		div {
    			width:260px;
    			height:178px;
    		}
    		
    		img {
    			filter: alpha(opacity=80);
    			moz-opacity: 0.80;
    			opacity: 0.80;
    		}
    		
    		p {
    			position:absolute;
    			left:30px;
    			top:160px;
    			color:#fff;
    			font-family:arial, verdana, sans-serif;
    			font-weight:900;
    		}
    		
    		div:hover img {
    			filter: alpha(opacity=100);
    			moz-opacity: 1;
    			opacity: 1;
    		}
    		
    		div:hover p {
    			color:#0f0;
    		}
    	
    	</style>
    	
    </head>
    
    <body>
    
    	<div>
    	
    		<img src="image1.jpg" alt="Image 1" title="" />
    	
    		<p>Here is the link text.</p>
    	
    	</div>
    
    </body>
    </html>
    Sorry if you were hoping for a "silver bullet" fix. I don't have one.
    matt | design | blog


  •  

    Posting Permissions

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