...

View Full Version : Multiple mouseover help



perla
02-15-2009, 12:03 AM
Hello,New Here.
I have created multiple image maps and rollovers in Adobe Image ready and all works fine in my browser,but i am having difficulty making it all work on my server.
I have uploaded all images to root/userimages and i see my image on my home page and all the links work fine except i cannot get the mouseover on text to change to green text,and pics to highlight when mouseover.i do not know how or where i place the code to link to these other images in user images.
Please could someone highlight on my html text where and how i do that in html home page.
Hope this makes sense
thanks for all help.

Excavator
02-15-2009, 12:36 AM
Hello perla,
Just glancing over your code, you have images loading with this line: images/dd_home_01-ImageMap_03_over.jpg but shouldn't that read
userimages/dd_home_01-ImageMap_03_over.jpg

The absolute path is http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_03_over.jpg and I can see the image when I put that in my browser. If userimages/dd_home_01-ImageMap_03_over.jpg doesn't work you may need to use

/userimages/dd_home_01-ImageMap_03_over.jpg
or
../userimages/dd_home_01-ImageMap_03_over.jpg


This works, I used the absolute path so I could run it here -
<HTML>
<HEAD>
<TITLE>home page d&d</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<!-- ImageReady Preload Script (home page d&d.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) {
dd_home_01_ImageMap_03_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_03_over.jpg");
dd_home_01_ImageMap_09_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_09_over.jpg");
dd_home_01_ImageMap_15_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_15_over.jpg");
dd_home_01_ImageMap_04_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_04_over.jpg");
dd_home_01_ImageMap_16_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_16_over.jpg");
dd_home_01_ImageMap_17_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_17_over.jpg");
dd_home_01_ImageMap_05_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_05_over.jpg");
dd_home_01_ImageMap_11_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_11_over.jpg");
dd_home_01_ImageMap_06_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_06_over.jpg");
dd_home_01_ImageMap_18_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_18_over.jpg");
dd_home_01_ImageMap_01_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_01_over.jpg");
dd_home_01_ImageMap_07_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_07_over.jpg");
dd_home_01_ImageMap_19_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_19_over.jpg");
dd_home_01_ImageMap_10_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_10_over.jpg");
dd_home_01_ImageMap_20_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_20_over.jpg");
dd_home_01_ImageMap_02_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_02_over.jpg");
dd_home_01_ImageMap_08_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_08_over.jpg");
dd_home_01_ImageMap_12_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_12_over.jpg");
dd_home_01_ImageMap_13_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_13_over.jpg");
dd_home_01_ImageMap_14_over = newImage("http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_14_over.jpg");
preloadFlag = true;
}
}

// -->
</SCRIPT>
<!-- End Preload Script -->
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 ONLOAD="preloadImages();">
<!-- ImageReady Slices (home page d&d.psd) -->
<IMG NAME="dd_home_01" SRC="http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg" WIDTH=800 HEIGHT=600 BORDER=0 ALT="" USEMAP="#dd_home_01_Map">
<MAP NAME="dd_home_01_Map">
<AREA SHAPE="rect" ALT="So Many Effects" COORDS="285,541,488,593" HREF="http://www.ddbeautyproducts.com/page31.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_20_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi De Luxe By D&D Beauty Products" COORDS="0,442,219,598" HREF="http://www.ddbeautyproducts.com/userimages/procart7.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_19_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="D&D Beauty Products Monoi De Luxe Signature Collection" COORDS="0,391,223,439" HREF="http://www.ddbeautyproducts.com/userimages/procart7.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_18_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">

<AREA SHAPE="rect" ALT="Monoi Body Glow Oil Collection" COORDS="3,219,219,388" HREF="http://www.ddbeautyproducts.com/userimages/procart2.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_17_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi Body Glow Oil Collection" COORDS="0,191,244,216" HREF="http://www.ddbeautyproducts.com/userimages/procart2.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_16_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="One Little Tiare Flower So many Fragrances" COORDS="292,210,473,231" HREF="http://www.ddbeautyproducts.com/userimages/procart9.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_15_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Scented Oils" COORDS="4,31,217,187" HREF="http://www.ddbeautyproducts.com/userimages/procart6.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_14_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Pure Oil" COORDS="337,288,456,314" HREF="http://www.ddbeautyproducts.com/userimages/procart5.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_13_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Scented Oils" COORDS="29,4,188,24" HREF="http://www.ddbeautyproducts.com/userimages/procart6.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_12_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi De Tahiti Pure Oil" COORDS="258,232,501,531" HREF="http://www.ddbeautyproducts.com/userimages/procart35.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_11_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Tiare flower" COORDS="418,105,522,212" HREF="http://www.ddbeautyproducts.com/userimages/procart35.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_10_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Luxury Assorted Gift Baskets" COORDS="523,395,800,420" HREF="http://www.ddbeautyproducts.com/userimages/procart45.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_09_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Luxury Assorted Gift Basket" COORDS="622,419,797,596" HREF="http://www.ddbeautyproducts.com/userimages/procart45.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_08_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Luxury Hand Made Soap" COORDS="571,222,799,395" HREF="http://www.ddbeautyproducts.com/userimages/procart3.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_07_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Luxury Hand Made Soaps" COORDS="539,196,800,218" HREF="http://www.ddbeautyproducts.com/userimages/procart3.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_06_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Mini Tiare Soap" COORDS="580,0,799,48" HREF="http://www.ddbeautyproducts.com/userimages/procart3.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_05_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Home" COORDS="349,4,477,57" HREF="http://www.ddbeautyproducts.com/index.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_04_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi de Tahiti Mini Tiare Soap" COORDS="619,51,798,195" HREF="http://www.ddbeautyproducts.com/userimages/procart3.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_03_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Tamanu Oil" COORDS="574,527,620,592" HREF="http://www.ddbeautyproducts.com/userimages/procart51.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_02_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">
<AREA SHAPE="rect" ALT="Monoi De Tahiti Appelation d'Origin" COORDS="570,131,615,192" HREF="http://www.ddbeautyproducts.com/page22.htm" TARGET="_self"
ONMOUSEOVER="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01-ImageMap_01_over.jpg'); return true;"
ONMOUSEOUT="changeImages('dd_home_01', 'http://www.ddbeautyproducts.com/userimages/dd_home_01.jpg'); return true;">

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

You should add a DocType. See my sig below (or the sticky subject in this forum) about DocTypes.


...

perla
02-15-2009, 10:57 AM
Hi,
First of all thanks for taking the time to take a look at this for me (Big thanks).
But i am really a beginner at this code stuff and i am really lost as to know where i paste this code in on my home page.
Please could you lead me by the hand and highlight on my attachment where i would do this.
I am using a very basic make it yourself website.so limited resources.
thanks for your help.

Excavator
02-15-2009, 09:09 PM
Hi,
First of all thanks for taking the time to take a look at this for me (Big thanks).
But i am really a beginner at this code stuff and i am really lost as to know where i paste this code in on my home page.
Please could you lead me by the hand and highlight on my attachment where i would do this.
I am using a very basic make it yourself website.so limited resources.
thanks for your help.


Copy that entire code I posted
paste it as a new document in whatever editor you are using
save it as test.html
view it in your browser


In your local version of the document, look at the path to your images compared to the code I've posted. When you go to fix your paths, try one of the following (I'm sure #1 is the path that will work for you):

userimages/dd_home_01-ImageMap_03_over.jpg
/userimages/dd_home_01-ImageMap_03_over.jpg
../userimages/dd_home_01-ImageMap_03_over.jpg

See how I've used userimages instead of just images like you did?

perla
02-16-2009, 03:22 PM
YOU ARE A STAR:thumbsup:It works:).
thank you again i do not know what i would have done without your help,really appreciate that.
One little thing i did notice it takes a time to load so that the text changes to green and the pics light up,any thought's on how to quicken that up???.
And i would like some pointers in my Content,keywords S.E.O ect...as i am about to do that part of my site.
This is my first site i have made so would love someone like yourself to give me there honest opinion on my site.
Cheers again.

Excavator
02-16-2009, 07:28 PM
Cool, I'm glad it's working.
I've lost your link now. Can't see it to watch the load times.
I did have the main image so I optimized that for you. Compare this one (http://nopeople.com/webfiles/dd_home_01-ImageMap_03_over.jpg)to yours, check the file sizes - this one should load a bit faster since it's 20% the size of the original.

perla
02-17-2009, 11:22 AM
Hi again,
thank you for the pic although i have not uploaded this to my site yet as i am still updating.
here is the link to my site URL removed as requested by OP
What do you think?.
thanks again for all your help.:)

Excavator
02-17-2009, 08:42 PM
What do you think?.


Not sure you don't have a bit of divitis (http://www.tyssendesign.com.au/articles/faqs/what-is-divitis/) going on there. Your main image is buried 5 divs deep and two of those don't even have id/class.

It looks good and works well in IE8 and IE7, the flash thing doesn't load here on FF3 so there is a big black gap above your image map.

#h-nav {background:url(../images/menu_bg.jpg ... is not working well with your bottom row of links.


I think that menu on the bottom needs a hover color for the links. There are so many and they are kind of small, it's hard to tell which one your over.

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.ddbeautyproducts.com%2Findex.htm :eek:

perla
02-19-2009, 12:18 AM
hi,
thanks for the infoormation
not sure what to do with all divitis,iam limited to what i can do with the site i use, i am using firefox 3.0.6 and i see the flash slideshow.
what can i do with this?,
:#h-nav {background:url(../images/menu_bg.jpg ... is not working well with your bottom row of links.
looks like a contact form or something and a menu.
also the links at the bottom how can i make a hover color to green text on hover like my site map?
thanks again for your patience so new at this.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum