Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    alright, so i've made an image, only the hover attribute won't work. here's the ci was using:
    <img src="imagemap.jpg" width="142" height="173" border="0" usemap="#map" />

    <map name="map">
    <!-- #$-:Image map file created by GIMP Image Map plug-in -->
    <!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
    <!-- #$-:Please do not edit lines starting with "#$" -->
    <!-- #$VERSION:2.3 -->
    <!-- #$AUTHOR:jessica -->
    <area shape="rect" coords="84,4,118,32" onmouseover="mouseover(herhover.jpg)" href="aboutme.html">
    <area shape="rect" coords="45,31,79,54" onmouseover="sitehover.jpg" href="about.html">
    <area shape="rect" coords="55,59,117,83" onmouseover="contenthover.jpg" href="content.html">
    <area shape="rect" coords="62,85,136,137" onmouseover="affieshover.jpg" href="affies.html">
    <area shape="rect" coords="1,117,61,168" onmouseover="refeshhover.jpg" href="index.php">
    </map>

    i've tried that javascript thing but i never fully understood it. i didn't know where to put in my own stuff and what to leave... HELP!!!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    This:
    onmouseover="mouseover(herhover.jpg)"

    refers to a Javascript function you are calling "mouseover".
    but you don't have any Javascript or the function.

    So you need to create the "onmouseover" image and the "onmouseout" image.

    ============================

    This is an example using a normal link ... with a graphic button:

    <a href="about.php" onmouseover="roll_over('but1', 'images/About us ro btn.jpg')" onmouseout="roll_over('but1','images/About us btn.jpg')"><img src='images/About us btn.jpg' name='but1' alt='About Us' title='About Us' /></a><br />

    And this is the Javascript that is inserted right before </head> on your webpage:

    <script language="javascript" type="text/javascript">
    <!--
    function roll_over(img_name, img_src)
    {
    document[img_name].src = img_src;
    }
    //-->
    </script>


    ============================

    Your case is a bit different because you are using a mapped image.

    But it would sort of be the same thing. You need to add a unique name
    for each line and create the image that comes back after the mouse is
    moved away.

    I didn't test this ... but it might be something like this ...

    <area shape="rect" coords="84,4,118,32" name="area1" onmouseover="roll_over('area1','herhover.jpg')" onmouseout="roll_over('area1','herhover_off.jpg')" >href="aboutme.html">

    You're going to have to experiment or post in the Javascript area of this forum.
    I'm just kind of guessing on how to work with the <area shape>


  4. #3
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    what does mouseout do?

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    onmouseout is when the mouse leaves the named object.
    onmouseover is when the mouse enters and is within the named object.

    If you go into the object and change the image, it won't change back
    when you leave the object unless you tell it to (by using onmouseout).


  6. #5
    Member
    Join Date
    Sep 2008
    Posts
    33
    Member #
    17294
    ohhh
    gotcha
    thanks so much


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:36 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com