Advanced Search

Results 1 to 6 of 6

Thread: Image Switch on-click, with each image having it's own on-mouseover highlight image

  1. #1
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Switch on-click, with each image having it's own on-mouseover highlight image

    I would like to have a Play button that becomes a Pause button once clicked, however I would also like them each have a mouse-over image (highlighted play/pause button images). I've been able to do one or the other but not both. There is even a similar solution on here, but without the roll-over image ability:



    Any assistance would be greatly appreciated.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    261
    Thanked 690 Times in 678 Posts

    Default

    What do you want these buttons to do? It should be possible to make the graphics do that, but you will also need to deal with any extra features, like playing a video or slideshow.


    There are a few ways to approach this. You can either rewrite the element (img? div?) each time, or you can use an image swap script with conditionals.

    Probably the easiest way will be to mix the two: create two separate divs/imgs that have the desired rollover functionality then use clicks to rewrite between them.

    Of course then you will need to integrate the additional functionality mentioned above.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Daniel,

    I will be using the buttons under a fluid scaled photo gallery. you can see it here:

    http://www.galluzzoimagery.com/test/test.html

    Thanks.

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    261
    Thanked 690 Times in 678 Posts

    Default

    It looks like you should be able to just switch the <a> tags for the play/pause buttons. The easiest way of doing this would be to set one of them as display:none; by default then to switch them when you click one of the buttons, using the onclick attribute. Does that help or do you need more specific information?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi Djr33.


    I'm not too familiar with implementing 'display:none'. Any additional details would be appreciated.


    Thanks,
    C.

  6. #6
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    261
    Thanked 690 Times in 678 Posts

    Default

    It's a CSS property:
    Code:
    <style type="text/css">
    element { display:none; }
    </style>
    If you want to modify that using Javascript, you should be able to access it in the following way:
    Code:
    <script type="text/javascript">
    element.style.display = 'none'; //hide it
    element.style.display = 'block'; //display as a "block" element, like a <div>
    element.style.display = 'inline'; //display as an "inline" element, like a <span> or normal <img>
    </script>
    Of course you'll need to put all of this together using functions and conditionals (ifs), but the tools above are the basics for what you'll need to do. If you alternate displaying one image instead of the other, then you'll be able to effectively "change" the image onclick to the other, and that way keep the same code as you have now for the onmouseover and other code.

    Note that you can use this format if you need two or more element in an html event attribute:
    <img onclick="function1(); function2();">
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

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
  •