SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Help with a javascript array !

    Very new to coding javascript and I have a question
    for the 'experts'.

    I would like to take included code and edit it to work
    with multiple images in the most efficient way
    possible. The code excerpt comes from w3schools.

    As it is currently written, if you add another image with the same filter effect neither work as the image names (ID) conflict.

    Code:
    <html>
    <head>
    <style>
    img
    {
    filter:alpha(opacity=10)
    }
    </style>
    
    <script type="text/javascript">
    function clean()
    {
    interval=setInterval("makeclean(myImage)",10)
    }
    
    function foggy()
    {
    clearInterval(interval)
    myImage.filters.alpha.opacity=10
    }
    
    function makeclean()
    {
    if (myImage.filters.alpha.opacity<100)
    	{
    	myImage.filters.alpha.opacity+=5
    	}
    else if (window.interval)
    	{
    	clearInterval(interval)
    	}
    }
    
    </script></head>
    
    <body>
    <img id="myImage" src="landscape.jpg" 
    onmouseover="clean()" onmouseout="foggy()" 
    width="160" height="120">
    <b>Mouse over the image</b>
    </body>
    
    </html>

    Thanks for any help you can provide on this!

    Greg
    Go Leafs Go!!!!!!!!

  2. #2
    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)
    Code:
    function clean()
    {
    myImage=window.event.srcElement;
    interval=setInterval("makeclean(myImage)",10)
    }
    
    function foggy()
    {
    myImage=window.event.srcElement;
    clearInterval(interval)
    myImage.filters.alpha.opacity=10
    }
    
    function makeclean(myImage)
    {
    if (myImage.filters.alpha.opacity<100)
    	{
    	myImage.filters.alpha.opacity+=5
    	}
    else if (window.interval)
    	{
    	clearInterval(interval)
    	}
    }
    change the id to anything you want, just not my Image.
    Add anything else you want as well.

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

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    That works like a hot damn!


    Thanks for the response Flawless_koder!

    Next question?

    Now, how can you limit the effect so it only impacts specified images on the page and not all of them?

    Greg - trout67
    Last edited by trout67; May 2, 2002 at 09:04.
    Go Leafs Go!!!!!!!!

  4. #4
    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 it will only work on the ones you put a onmouseover on

    think about it


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

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Next step. The idea behind using this technique is the infamous photo gallery, thumbnails on one side with a larger image to be displayed when you click on the thumbnail. Regular navigation and page layout would still be present. The ONLY images to be impacted by the filter will be the thumbnails.

    Below is my current workaround, however, it is not achieving the desired effect. Is there a better way to handle this?

    <html>
    <head>
    <style>
    img
    {
    filter:alpha(opacity=20)
    }
    </style>

    <script type="text/javascript">
    function clean()
    {
    myImage=window.event.srcElement;
    interval=setInterval("makeclean(myImage)",20)
    }


    function foggy()
    {
    myImage=window.event.srcElement;
    clearInterval(interval)
    myImage.filters.alpha.opacity=20
    }

    function makeclean()
    {
    if (myImage.filters.alpha.opacity<100)
    {
    myImage.filters.alpha.opacity+=10
    }
    else if (window.interval)
    {
    clearInterval(interval)
    }
    }

    </script></head>

    <body>
    <div>
    <img id="pic1" src="landscape.jpg" onmouseover="clean()" onmouseout="foggy()" width="160" height="120"></div>
    <p><b>Mouse over the pic1</b></p>
    <div>
    <img id="pic2" src="landscape.jpg" onmouseover="clean()" onmouseout="foggy()" width="160" height="120"></div>
    <p><b>Mouse over pic2</b></p>
    <div>
    <img src="landscape.jpg" onload="clean()" width="160" height="120"></div>
    <p><b>Mouse over disabled on pic3</b></p>
    </body>

    </html>
    Go Leafs Go!!!!!!!!

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Flawless, that wasn't quite it because all of the images had the alpha transparency applied to them. However, in a glorified moment of deep insight I decided to assign a 'class' of 'thumb' to the images to be affected.

    Miracle of miracles, it worked!

    Thanks again for your help!
    Go Leafs Go!!!!!!!!

  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 you have no onclick's.

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

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2002
    Location
    BC, Canada
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The photo gallery is just a hypothetical application of the code. The onclicks and displying larger images part is not a problem for me.

    I guess what i am saying Thanks again, I think I have got what I need now to do what I would like with the code.
    Go Leafs Go!!!!!!!!


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
  •