Mouseover effect and link to next page

Discussion in 'Web Design and Development' started by Nosoforos, Jul 9, 2008.

  1. Nosoforos macrumors member

    Joined:
    Jan 17, 2008
    #1
    On the homepage of my iWeb created website, I want a logo to appear that changes color from white to yellow when you mouse over it. This is easy to do with a line of code that I found on the internet, which can be inserted in an html snippet. However, I want the logo to take you to my Welcome page, when clicked. I don't know how to do this...
    (http://web.mac.com/catucker/InsideOutside/Rollover.html - that's the html code I use)

    my website: www.circustreurdier.nl (it's in Dutch)
     
  2. notnek macrumors 6502

    notnek

    Joined:
    Oct 25, 2007
    #2
    in your HTML snippet, change this:

    Code:
    <a href="yoursite/yourpage" target="_blank">
    <img border="0" alt="Artotems - Communication Matters!" src="http://web.mac.com/iDiskname/Docs/number1.jpg" name="b1"
     width="114" height="82" onmouseover="mouseOver()" onmouseout="mouseOut()"
    /></a>
    
    to this:

    Code:
    <a href="http://www.circustreurdier.nl/Welkom.html">
    <img border="0" alt="YOUR IMAGE ALT" src="IMAGE LOCATION" name="b1"
     width="114" height="82" onmouseover="mouseOver()" onmouseout="mouseOut()"
    /></a>
    
     
  3. Nosoforos thread starter macrumors member

    Joined:
    Jan 17, 2008
    #3
    Thanks for the fast reply! Gonna try it out right now!
     
  4. Nosoforos thread starter macrumors member

    Joined:
    Jan 17, 2008
    #4
    well, it worked, but when I upload the site with Cyberduck, the logo doesn't show on the internet. I guess I have to upload the pictures somewhere, but I have no idea where. It does work in the preview of the website.
     
  5. uaaerospace macrumors 6502

    Joined:
    Feb 15, 2005
    Location:
    Alabama
    #5
    The problem is that your img tag is pointing to the file on your computer instead of on the web server. The current link is:

    /Users/Jeroen/Pictures/Circus%20Treurdier/website/Plaatjes/Logo%20Circus%20Treurdier.jpg

    You should delete the first part of the link so that the link is a relative link to the jpg. It will depend on the location of the jpg file on the server, but most likely it will be something like this:

    Plaatjes/Logo%20Circus%20Treurdier.jpg
    or simply
    Logo%20Circus%20Treurdier.jpg
     

Share This Page