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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile server-side imagemap image-swap without javascript

    Greetings! I am glad to have finally found a place to ask for coding assistance!!

    So I'm overhauling my site, http://www.stentoriansound.com/, and I have created a server-side imagemap which has my logo and 4 'buttons' linked to my subdomains. The imagemap is working properly as far as I can tell, but I want to make the color of the text in the image change from white to blue using the onMouseOver function.

    Can anyone tell me if the OnMouseOver attribute is javascript? I believe I can use it without java but I'm not sure. I do not want any java code on my site, this is not an option.

    Is there a way to have my image's colors shift with OnMouseOver without using javascript?

    From what I can tell I must define the OnMouseOver in my css script, and then I can reference OnMouseOver for each image swap I need.

    I've searched all over for an answer to this, but can not figure out a solution. If you could help point me in the right direction I would be most appreciative!

    Here is the image I've created my imagemap for:


    It seems this should be terribly simple; any suggestions?

    Cheers!!

    - Tony

    p.s. I forgot to mention I'm using Adobe GoLive; I created the imagemap with this and then slightly modified the code...
    Last edited by Preacher T; 05-05-2006 at 06:24 PM.

  • #2
    New to the CF scene
    Join Date
    Apr 2006
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm not sure if this is what you're looking for but...
    Code:
    <a href="http://www.yoursite.com" onMouseOver="document.images['i0'].src='/MouseOverImage.gif'; return true;"  onMouseOut="document.images['i0'].src='OriginalImage.gif'"><img src="OriginalImage.gif" width="whatever" height="whatever" border="0" alt="whatever" name="i0"></a>
    you may want to break up your image into separated images and put them in a table, that way each link could have its own mouseover image.

  • #3
    New to the CF scene
    Join Date
    May 2006
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    jarrod, that looks about right! am I correct that you do not need java for any of those parameters? this is just html, right?

    I have to go to work now, but I'll play with it when I get back. any other suggestions or ideas would be great!!

    - Tony

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,791
    Thanks
    8
    Thanked 131 Times in 129 Posts
    the example he posted is Javascript. OnMouseAnything is Javascript.

    you can try something like this. not a full example and can be cleaned u a lot but maybe it's a step in the direction you want to go.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    	<meta http-equiv="content-type" content="text/html; 
    
    charset=utf-8">
    	<title>sliding doors</title>
    	<style type="text/css">
    * {
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    }
    #header {
    width: 690px;
    height: 277px;
    background: #000 url(stentorian.jpg) top left no-repeat;
    position: relative;
    }
    ul {
    top: 160px;
    position: absolute;
    }
    a {
    color: #fff;
    }
    a.sound span {
    width: 288px;
    height: 49px;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background: transparent url(soundlink.jpg) top left no-repeat;
    }
    a.sound:hover span {
    background-position: 100% 0;
    }		
    	</style>	
    </head>
    <body>
    <div id="header">
    <ul>
    <li><a href="#" class="sound">Sound<span></span></a>
    </ul>
    </div>
    </body>
    
    </html>
    all css and html ala http://www.alistapart.com sliding doors technique.

    images i used are:
    Attached Thumbnails Attached Thumbnails server-side imagemap image-swap without javascript-stentorian.jpg   server-side imagemap image-swap without javascript-soundlink.jpg  
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    New to the CF scene
    Join Date
    May 2006
    Location
    Austin, TX
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by harbingerOTV
    the example he posted is Javascript. OnMouseAnything is Javascript.
    thanks a lot man! I thought in the back of my mind that this was the case, but I am certainly an amateur. I'll give that code a whirl and see what I can come up with!! I think it would definately help to split the image up and put it in a table; if I can just figure out a way to make the color change when the mouse is atop the image.... I have to find a way so the user knows what they're about to click on!! and I suppose I have personal issues with java, thus my wanting to avoid it like the plague...

    thanks again harbinger!

    - T


  •  

    Posting Permissions

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