...

View Full Version : Anybody wants to tackle this one



perla
06-30-2010, 06:34 PM
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.

BoldUlysses
06-30-2010, 06:44 PM
Can you post the code you have that works on your local machine?

Remember to post in between CODE tags.

skywalker2208
06-30-2010, 06:57 PM
Can you post a link if it is up on a live site?

perla
06-30-2010, 09:00 PM
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>

BoldUlysses
06-30-2010, 09:40 PM
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 (http://www.w3schools.com/). 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 (http://sufferndesign.com/helping/site213.html). And the code for said site:


<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum