Welcome to MacTalk Australia

the largest Australian community for Apple discussions and topics

Join the discussions, Register Now!
Results 1 to 14 of 14
  1. #1

    Join Date
    Jun 2006
    Location
    Hobart
    Posts
    918

    Default Creating image roll overs with out flash? (see link)

    Hey,

    I'm working on a website and having been doing a few test, I'm to create image roll overs with small thumbnails and then a large image next to the thumbnails, so when the mouse rolls over small image the big image changes.

    I have created this in flash, but want to try and do it using html/javascript so that it is easier for the client to change images in contribute.

    This is my example in flash: http://web.mac.com/lelongw/Site/Blank.html

    If anyone could give me some assitance or point me in the right direction with some links or books that would be great.

    Thanks

    William
    Macbook Pro 2.5Ghz Core Duo 2, 250Gb HD, 4Gb Ram.
    Orange iPod Shuffle, 1st Gen 2Gb Nano, 16Gb iPod Touch

  2. #2

    Join Date
    Jan 2004
    Location
    Sydney
    Posts
    5,960

    Default

    Google search, you'll find plenty of javascript examples.

  3. #3

    Default

    Javascript would be the way to go. You're probably interested in the onmouseover function.

    And I'm glad you're not doing this with Flash. Much nicer way to go.

  4. #4

    Join Date
    May 2005
    Location
    London, UK (but i'm Aussie)
    Posts
    484
    15" 2.4GHz C2D (Penryn) MBP 4Gb RAM, Pismo, 80Gb iPod Classic
    -----------------
    Successful Trades: Simo, mulquemi(x2), carlow1, hmc

  5. #5

    Join Date
    Jan 2005
    Location
    Warrnambool
    Posts
    409

    Default

    Download the trial version of Dreamweaver; it has a built in tool that does this.

  6. #6

    Join Date
    Jun 2006
    Location
    Hobart
    Posts
    918

    Default

    Quote Originally Posted by milliedog View Post
    Download the trial version of Dreamweaver; it has a built in tool that does this.
    Hi,

    I have the full version of dreamweaver as I am using it to build the site, which is the tool I would use to achieve this?

    Thanks

    William
    Macbook Pro 2.5Ghz Core Duo 2, 250Gb HD, 4Gb Ram.
    Orange iPod Shuffle, 1st Gen 2Gb Nano, 16Gb iPod Touch

  7. #7

    Default

    As said above, Dreamwaver has a wizard to help you create rollovers and it does it really well.

  8. #8

    Default

    Yep, in Dreamweaver try Insert > Image Objects > Rollover Image.

    There's also a button for it in the Inserts Window (Under Common Elements)

    Fill in the relevant info and that should get you out of trouble!

    Edit: Sorry just realised you want a separate image to change, not the button... (damn Corona :P }
    I own lots of things with apples on them.

    Successful trades: SoVeReIgN, iSlayer, areal, thatfilthyspringbok, jeloz, isoprophlex

  9. #9

    Join Date
    Nov 2004
    Location
    Adelaide
    Posts
    205

    Default

    This is actually surprisingly easy to get working

    Here is how I would code it:
    [HTML]<html>
    <head>
    <title>Java Roll Over Example</title>
    <script language="javascript" type="text/javascript">

    function imagechange(url) {

    document.getElementById('bigimage').src = url;

    }

    </script>
    </head>

    <body>

    <p>
    <img src="image1.jpg" onmouseover="imagechange('image1.jpg')">
    <img src="image2.jpg" onmouseover="imagechange('image2.jpg')">
    <img src="image3.jpg" onmouseover="imagechange('image3.jpg')">
    </p>
    <p>
    <img src="image1.jpg" id="bigimage">
    </p>

    </body>

    </html>
    [/HTML]

    Hope this helps you out William
    Green Beef: It's good for you

    C2D MacBook white
    eee701+soldered internal sdhc

  10. #10

    Join Date
    Jun 2006
    Location
    Hobart
    Posts
    918

    Default

    Hey,

    Thanks for everyone who helped, I got it working using behaviours and this link http://www.communitymx.com/content/a....cfm?cid=E11E8, thanks to an above poster.

    Thanks again to everyone who assited!!

    William
    Macbook Pro 2.5Ghz Core Duo 2, 250Gb HD, 4Gb Ram.
    Orange iPod Shuffle, 1st Gen 2Gb Nano, 16Gb iPod Touch

  11. #11

    Join Date
    Apr 2005
    Location
    is where i is at
    Posts
    965

    Default

    i use css to do image rollovers, its the easiest and the quickest
    righto then

  12. #12

    Join Date
    May 2005
    Location
    Inner Space
    Posts
    5,522

    Default

    Quote Originally Posted by xfodder View Post
    i use css to do image rollovers, its the easiest and the quickest
    ditto

    The advantage is that with :hover is you don't need to deal with seperate onmouseover and onmouseout events.

    handy example with rolover gif here http://www.ssi-developer.net/css/men...r-effect.shtml
    This opinion intentionally left blank.

  13. #13

    Default

    Quote Originally Posted by xfodder View Post
    i use css to do image rollovers, its the easiest and the quickest
    I was going to suggest the same

    Everyone in the world still seems to have a stiffy for JS though, CSS is superior.

  14. #14

    Join Date
    Apr 2005
    Location
    is where i is at
    Posts
    965

    Default

    JS is only beneficial if you want to do some fancy fading or something like that, for simple mouse overs css is so much easier
    righto then

Tags for this Thread

Posting Permissions

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