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 9 of 9
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Multiple mouseover help

    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.
    Attached Files Attached Files
    Last edited by perla; 02-14-2009 at 11:08 PM.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Code:
    userimages/dd_home_01-ImageMap_03_over.jpg
    The absolute path is http://www.ddbeautyproducts.com/user...ap_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 -
    Code:
    <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.


    ...
    Last edited by Excavator; 02-14-2009 at 11:44 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Attached Files Attached Files

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by perla View Post
    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):
    1. userimages/dd_home_01-ImageMap_03_over.jpg
    2. /userimages/dd_home_01-ImageMap_03_over.jpg
    3. ../userimages/dd_home_01-ImageMap_03_over.jpg

    See how I've used userimages instead of just images like you did?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    YOU ARE A STARIt 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.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 to yours, check the file sizes - this one should load a bit faster since it's 20% the size of the original.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Feb 2009
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by WA; 04-04-2009 at 11:05 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by perla View Post
    What do you think?.
    Not sure you don't have a bit of 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?verbos...om%2Findex.htm
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

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


  •  

    Posting Permissions

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