SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question with mouseovers

    OK, I've been using a FP2k mouseover in my pages for a while, but recently I've been trying to get my pages W3C valid, and pretty much everything FP put in there is invalid.

    Could someone recommend a way to do my mouseovers that's W3C complient?

    http://www.webinfractions.com/index.php
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I made this image rollover script a while ago, and it's perfectly valid.

  3. #3
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    arghhhh.

    Bill will know what that's about.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Flawless_koder
    arghhhh.

    Bill will know what that's about.

    Flawless
    Yep

    Allow me to translate.

    What he means is that you should have used Dreamweaver as it creates much better (and compliant) code than Frontpage

    ...Right, flawless?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    he he

    Your sense of humour is impeccable as usual.

    You're right though - i definately prefer dreamweaver as
    a content and script generator to frontpage.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  6. #6
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've thoroughly left those kinds of editors, but kept FP's img swap because i don't know any javascript whatsoever.

    Now, I have no idea how you'd do that for multiple images.
    Also, i'm not using text links at all.
    Note the link above.
    Last edited by Defender1; Jul 15, 2002 at 03:57.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  7. #7
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well why not have a go at creating your own function in JS,
    and understanding how and why it works.

    I'm here for help if you need it, and i think you'd learn
    from the experience.

    It's good, i think even Bill will agree, to get away from
    code generators when scripting - since an understanding
    of the underlying principles gives the oportunity to see
    better ways of doing things, and more efficient directions
    in which to move when handling an event.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  8. #8
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, it's working, but only on one img.
    I sorta understand how it works, but don't have a clue how i'd make it work on more than one image short of copy/pasting the js code for each image i want to do it for.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  9. #9
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't take this the wrong way, but i'm never too keen to
    go off to a link and search through the source to try
    and find out what's being referred to.

    Can you please post the function that you've got, and
    two or three examples of places where a mouseover in a
    tag will call it.
    Thanks

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  10. #10
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh, yea. that's understandable.
    the function
    Code:
    <script language="javascript" type="text/javascript">
    <!--
    function swap_em(url) {
        window.document.img01.src = url;
    }
    //-->
    </script>
    the code
    Code:
    <a href="/index.php?p=1" onmouseover="swap_em('/images/nav_home2.jpg');return false;" onmouseout="swap_em('/images/nav_home1.jpg');return false;"><img border="0" src="/images/nav_home1.jpg" width="226" height="34" name="img01"></a><br>
    <a href="/index.php?p=2" onmouseover="swap_em('/images/nav_gallery2.jpg');return false;" onmouseout="swap_em('/images/nav_gallery1.jpg');return false;"><img border="0" src="/images/nav_gallery1.jpg" name="img01" width="226" height="35"></a><br>
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  11. #11
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okie...

    So you have images.
    Each image has an "over" image.
    So why bother sending the url - use the NAME of the image to indicate it's state.

    Example.

    my_image.gif < normal image
    my_image_o.gif < image mousedover

    So in your example you rename your images like this:

    nav_home1.jpg -> nav_home.jpg
    nav_home2.jpg -> nav_home_o.jpg
    etc ... ...

    Next we want to PRELOAD our images - we do this to minimize
    the amount of time taken to do the swap.

    Code:
    var imgs = new Array('nav_home','nav_gallery');
    
    for (var i=0;i<imgs.length;i++){
          eval('var '+imgs[i]+' = new Image()');
          eval(imgs[i]+'.src = "/path/to/images/'+imgs[i]+'.jpg"');
          eval(imgs[i]+'_o.src = "/path/to/images/'+imgs[i]+'_o.jpg"');
          }
    
    function handle(){
          var s = event.srcElement || event.currentTarget || event.target;
          var i = s.firstChild;
          i.src = eval(i.name+((event.type.match('over')?'_o':'')+'.src');
          }

    I've NEVER tried polling the event type like this before - so i don't know if it'll work - but off my head that seems fairly secure.

    The only thing to note is that you MUST make the NAME of the image the src of the image, ie the name of your first image must be "nav_home".

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  12. #12
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    forgot to mention, perhaps it's obvious to me - but maybe not to you:

    the mouseover and the mouseout for the A tags will both be
    handle();

    okie?

    any questions, and do you want me to explain things further,
    or how they work...

    Let me know if you need a working example.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  13. #13
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, all that just flew right over my head.

    Like i said, i have no javascript experience.

    I also already preload my images.

    Working examples are good
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  14. #14
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's quite funny actually.

    I wrote the entire thing above out - with FULL notes, explaining EVERYTHING about it - and how JS worked ...
    then i pressed esc and it cleared it all

    so anyway - i'll knock you up an example.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  15. #15
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yea, i've erased a few long posts b4, not fun at all.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  16. #16
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.passway.org/defender.html

    Except ... it seems to be working slowy - and i have NO
    idea why ... if you find the mouseover is slow too - let me know,
    i'll look at it further!

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  17. #17
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, after moving some files and renaming images it's working pretty good.

    Just one thing i'd like to know: how would i change it so the mouseover (onmouseout) image looks in /images/imagefile.ext instead of the current directory?
    I don't want a bunch of images in my main directory. too cluttered.
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  18. #18
    Perl/Mason Guru Flawless_koder's Avatar
    Join Date
    Feb 2002
    Location
    Gatwick, UK
    Posts
    1,206
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you scroll up about six posts you'll see the one where i posted code in here.
    Code:
          eval(imgs[i]+'.src = "/path/to/images/'+imgs[i]+'.jpg"');
          eval(imgs[i]+'_o.src = "/path/to/images/'+imgs[i]+'_o.jpg"');
    There ^ that shows you the lines that need changing for the
    image path to be different.

    Flawless
    ---=| If you're going to buy a pet - get a Shetland Giraffe |=---

  19. #19
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heh, k. Got it.

    Now, if i want to add more images, i just name them appropriately, and add them to array right?
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*

  20. #20
    SitePoint Wizard Defender1's Avatar
    Join Date
    Apr 2001
    Location
    My Computer
    Posts
    2,808
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sweet, everythings workin fine.
    Thx alot
    Defender's Designs
    I'm Getting Married!

    Not-so-patiently awaiting Harry Potter Book 7 *sigh*


Bookmarks

Posting Permissions

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