SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: Images and js

  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images and js

    Hi all,
    I am new here and, of course, am looking for some help. I got wrangled in by some user of another forum to help out with some scripting.

    Here is the scenario:

    The first script would be... on page load. Thus on load waite 5 seconds then swap an existing image to another by a fade transition.

    The second option or script would be onMouseOver fade image1 to image2 via a
    fase transition. The mouse over action would be with a image graphics. At the same time changing the onMouseOver graphisc as well.

    The third script would be onClick (the image graphics) to fade transition image2 to image3.

    onMouseOut restore to image1

    A second button graphics would be identical, but would change image2 to image4...etc

    I appreciate the help.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,813
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Brothercake has some JavaScript image transition scripts at http://www.brothercake.com/site/reso...s/transitions/
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by iONic View Post
    Hi all,
    I am new here and, of course, am looking for some help. I got wrangled in by some user of another forum to help out with some scripting.

    Here is the scenario:
    Okay, I'll break things here and add in some links to jQuery sections that can help with what you're after.

    And, jQuery cycle for the rest of this, or perhaps choose from a wide range of light boxes for easier management and greater capability.

    The second option or script would be onMouseOver fade image1 to image2 via a
    fase transition. The mouse over action would be with a image graphics. At the same time changing the onMouseOver graphisc as well.

    The third script would be onClick (the image graphics) to fade transition image2 to image3.

    onMouseOut restore to image1

    A second button graphics would be identical, but would change image2 to image4...etc
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies for appearing to demand conplete workable code.

    Here is what I have been playing with:



    Code:
    <html>
    <head>
      <title></title>
      <script type="text/javascript">
    /*****************************************
    * Dissolving Image Rollover- By Roy Whittle 
    * This notice must stay intact for use
    *****************************************/
    //Generate transition CSS (transition=0 to 23)
    document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.4,transition=12) }</STYLE>');
    
    //Uncomment the next line for fading rollovers instead of dissolving:
    //document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.4) }</STYLE>');
    
    var onImages=new Array();
    function Rollover(imgName, imgSrc)
    {
    	onImages[imgName] = new Image();
    	onImages[imgName].src = imgSrc;
    }
    
    function turnOn(imgName){
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].apply();
    	document.images[imgName].offSrc = document.images[imgName].src;
    	document.images[imgName].src    = onImages[imgName].src;
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].play();
    }
    
    function turnOff(imgName){
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].stop();
    	document.images[imgName].src = document.images[imgName].offSrc;
    }
    
    //Specify name of participating images, plus paths to their onMouseover replacements:
    Rollover("red",  "red_on.gif");
    Rollover("green", "green_on.gif");
    Rollover("blue", "blue_on.gif");
    Rollover("car1",  "car1.jpg");
    Rollover("car2", "car2.jpg");
    Rollover("car_rr", "car_rr.jpg");
    
    </script>
    </head>
    
    <body>
    
    <a href = "#"
    onMouseOver="turnOn('red');"
    onMouseOut="turnOff('red');"><img name="red" class="imgTrans"
    onClick="turnOn('car_rr');"
    src="red_off.gif" border="0"></a><br>
    
    <a href = "#"
    onMouseOver="turnOn('green');"
    onMouseOut="turnOff('green');"><img name="green" class="imgTrans"
    onClick="turnOn('car_gr');"
    src="green_off.gif" border="0"></a><br>
    
    <a href = "#"
    onMouseOver="turnOn('blue');"
    onMouseOut="turnOff('blue');"><img name="blue" class="imgTrans"
    onClick="turnOn('car_bl');"
    src="blue_off.gif" border="0"></a><br>
    
    <br></body></html>
    My trouble now is that I need to have two onMouseOver's such as...
    onMouseOver="turnOn('blue');"
    onMouseOver="turnOn('car2');"

  5. #5
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Working with new scripts:

    Code:
    <html>
      <head>
      <title>Test</title>
        <script type="text/javascript">
    
    /*****************************************
    * Dissolving Image Rollover- By Roy Whittle 
    * This notice must stay intact for use
    *****************************************/
    
    //Generate transition CSS (transition=0 to 23)
    document.write('<STYLE TYPE="text/css">.imgTrans{ filter:revealTrans(duration=0.7,transition=12) }</STYLE>');
    
    //Uncomment the next line for fading rollovers instead of dissolving:
    document.write('<STYLE TYPE="text/css">.imgTrans{ filter:blendTrans(duration=0.7) }</STYLE>');
    
    var onImages=new Array();
    function Rollover(imgName, imgSrc)
    {
    	onImages[imgName] = new Image();
    	onImages[imgName].src = imgSrc;
    }
    
    function turnOn(imgName){
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].apply();
    	document.images[imgName].offSrc = document.images[imgName].src;
    	document.images[imgName].src    = onImages[imgName].src;
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].play();
    }
    
    function turnOff(imgName){
    	if(document.images[imgName].filters != null)
    		document.images[imgName].filters[0].stop();
    	document.images[imgName].src = document.images[imgName].offSrc;
        }
    
    function redon(imgName, imgSrc)
    {
        onCick="turnOn('car_rr');"
    
    }
    
    //Specify name of participating images, plus paths to their onMouseover replacements:
    Rollover("rr",  "rr_on.png");
    Rollover("ijm", "ijm_on.png");
    Rollover("rsp", "rsp_on.png");
    Rollover("as", "as_on.png");
    Rollover("car1",  "car1.jpg");
    Rollover("car2", "car2.jpg");
    Rollover("car_rr", "car_rr.jpg");
    Rollover("car_gr", "car_gr.jpg");
    Rollover("car_bl", "car_bl.jpg");
    
    </script>
    
      <script language="javascript" type="text/javascript">
      				function btn_on_1( img )
    				{
       				document.btn1.src = img;
    				}
                    function btn_on_2( img )
    				{
       				document.btn2.src = img;
    				}
                    function btn_on_3( img )
    				{
       				document.btn3.src = img;
    				}
                    function btn_on_4( img )
    				{
       				document.btn4.src = img;
    				}
    				function imgChangeCar( img )
    				{
       				document.car.src = img;
    				}
                    function lights_on( img )
    				{
       				document.car.src = img;
    				}
     			</script>
     </head>
    <body>
    <table border="0" cellpadding="10" summary="">
      <tr>
        <td width="110" rowspan="1" colspan="1">
          <img id="btn1"
          onclick="lights_on('carimgs/car_rr.jpg')"
          onmouseover="btn_on_1('carimgs/rr_on.png'); turnOn('car_rr')"
          onmouseout="btn_on_1('carimgs/rr_off.png'); imgChangeCar('carimgs/car1.jpg')"
          src="carimgs/rr_off.png" alt="rr turned off" border="0" name="btn1"></img></br></br>
    I am having trouble with one item. Most things are working.
    1) when I mouseover the button(btn1) the button image changes.
    2) whe I click the button the car image changes from car1.jpg to car_rr.jpg

    but onmouse over the car1.jpg image does not transition using the fade script and the function turnOn, thus fading in car1.jpg to car2.jpg

    can anyone point me in the right direction?

    Thanks

  6. #6
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks pmx57 for the tip on jQuery. This is new to me and is good news as well. It's been a while since I've done any scripting and a lot has changed since then.

    I am going to abandon my previous work as it seems that I was not going to get much help.

    Thanks again.


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
  •