42 users online (2 members and 40 guests)  


  Results 1 to 6 of 6

Related

  1. pics on comments    Forum: HTML Forum
    Replies: 0
  2. Mouseover pics    Forum: Javascript Forum
    Replies: 17
  3. Pics    Forum: HTML Forum
    Replies: 1
  4. Mouseover pics    Forum: HTML Forum
    Replies: 0
  5. Script to allow users to upload pics    Forum: Website Scripts Forum
    Replies: 2
  1. #1
    DreamingGirl's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2002
    Posts
    11

    hover on links and pics

    So me again...
    I can't figure out how to give other effects on my links besides a different background or a color... I was wondering how to make the link fade, how to strike thru, to uppercase and how to move the link when you hover it ...
    And I was also wondering how to make a picture change when it's hovered...
    Plz help...

  2. #2
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Hello again.

    Almost all these effects are do-able thru CSS. Except the fade, thats done with a Java Applet, usually. Or JavaScript can do it to.

    To change an image on rollover, check out this tutorial -

    http://hotwired.lycos.com/webmonkey/html/96/49/index2a.html?tw=programming


    For the other effects, you are basically changing the font when you hover over a link. I have a CSS reference here -

    http://css.somepeople.net/cssref

    Look up font, font-size, font-style etc. They can all be applied to hover links (a:hover).

    Oh, to move a link on hover-

    Code:
    a:hover {
    position: relative;
    top: +2px;
    left: +2px;
    }
    That will do it
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  3. #3
    DreamingGirl's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2002
    Posts
    11
    The links worked!!!

    But I'm still having trouble with the pics... I can't figure out what to change...
    Last edited by DreamingGirl; 09-16-2002 at 12:31 PM.

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    If you post some code, we may be able to help.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  5. #5
    DreamingGirl's Avatar
    New User

    Status
    Offline
    Join Date
    Aug 2002
    Posts
    11
    Hmm here what I'm trying to use...
    (edit:sometimes I have to rearrange text because code placed at the beginning of a post messes up the table where posts are placed on the front page of AHFB, in this case there was no text to rearrange so I just babbled )
    PHP Code:
    <script language="Javascript1.1">
    function 
    yaImgChange(imgNum,imgSrc) {
    document.images[imgNum].src imgSrc;
    }
    </script> 
    And...

    PHP Code:
    <a href="javascript:nothingMuch();" onMouseOver="yaImgChange(11,'img1.gif');" onMouseOut="yaImgChange(11,'img2.gif');"
    <
    img src="img1.gif">
    </
    a
    There....
    Last edited by HTML; 09-16-2002 at 03:29 PM.

  6. #6
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Accessing images thru the images array relies on heavily on knowing what the number/name of the image is.

    Try this code -

    PHP Code:
    <script language="Javascript1.1">

    function 
    yaImgChange(imgName,imgSrc) {

    document.images[imgName].src imgSrc;

    }

    </script>


    <a href="java script:nothingMuch();" onMouseOver="yaImgChange('imageOne','img2.gif');" onMouseOut="yaImgChange('imageOne','img1.gif');">

    <img src="img1.gif" id="imageOne">

    </a> 
    Lets take it line by line -

    PHP Code:

    function yaImgChange(imgName,imgSrc) { 
    This defines a function, and expects two bits of information to it. First is imgName, which is the identifier of the image to change. Second is imgSrc. this is the image file to replace it with.

    PHP Code:

    document
    .images[imgName].src imgSrc;


    This tells it that we would like the src of the image called imgName to be imgSrc. Therefore 'swapping' one image for another.



    PHP Code:
    onMouseOver="yaImgChange('imageOne','img2.gif');" 
    Heres where it all happens, onMouseOver (onMouseOver is an EVENT) then call the function called yaImageChange, but I would like to change the image called 'imageOne' into img2.gif

    PHP Code:
    <img src="img1.gif" id="imageOne"
    Ah-ha. Here we give the image a name so that the browser knows which image we mean.

    This should work fine, I tested it, and it worked okay for me. Have fun.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread