Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Anybody wants to tackle this one

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-30-2010, 06:34 PM   PM User | #1
perla
New Coder

 
Join Date: Feb 2009
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
perla is an unknown quantity at this point
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
File Type: txt Image Map.txt (13.3 KB, 43 views)
perla is offline   Reply With Quote
Old 06-30-2010, 06:44 PM   PM User | #2
BoldUlysses
Regular Coder

 
BoldUlysses's Avatar
 
Join Date: Jan 2008
Location: Winston-Salem, NC
Posts: 938
Thanks: 10
Thanked 190 Times in 187 Posts
BoldUlysses is on a distinguished road
Can you post the code you have that works on your local machine?

Remember to post in between CODE tags.
__________________
matt | design | blog
BoldUlysses is offline   Reply With Quote
Old 06-30-2010, 06:57 PM   PM User | #3
skywalker2208
Regular Coder

 
Join Date: Jan 2009
Posts: 193
Thanks: 0
Thanked 20 Times in 20 Posts
skywalker2208 is an unknown quantity at this point
Can you post a link if it is up on a live site?
skywalker2208 is offline   Reply With Quote
Old 06-30-2010, 09:00 PM   PM User | #4
perla
New Coder

 
Join Date: Feb 2009
Posts: 12
Thanks: 0
Thanked 0 Times in 0 Posts
perla is an unknown quantity at this point
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>
perla is offline   Reply With Quote
Old 06-30-2010, 09:40 PM   PM User | #5
BoldUlysses
Regular Coder

 
BoldUlysses's Avatar
 
Join Date: Jan 2008
Location: Winston-Salem, NC
Posts: 938
Thanks: 10
Thanked 190 Times in 187 Posts
BoldUlysses is on a distinguished road
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
BoldUlysses is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 09:52 PM.
Advertisement
Log in to turn off these ads.