Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Fade effect help?

    I need to have an image hyperlinked to a js function that fades text elswhere on the page. I imagine it looks something like <a href="(some js function or somethingrather"><img src="theimg.png"></a>, but how do I do it exactly? I would like code that I can just copy and paste in my header that is set to fade a specific line of text, and be able to hyperlink and image to initiate the js. Please help.

    Carson
    www.carsonkahn.com

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    The simplest way would be to use a JS library such as jQuery and then use any element you like to fade the image.

    Anchors are for creating a link, either to another document or an internal link in the current document. Don’t use anchors if you aren’t actually linking anything.

    A simple example:
    Code:
    <a class="whatever" href="#imageID">the image</a>
    …
    …
    <img id="imageID" src="…" alt="image description" />
    That’s the HTML part of it. If JS isn’t available then a click on the link will just bring you to the image itself (further down the page, for example). The JS will reside in an external JS file that is referenced in the head of the HTML file and the content looks like this:
    Code:
    if(typeof jQuery != "undefined") {
    	$(function() {
    		$('.whatever').click(function() {
    			$('#imageID').fadeOut();
    			return false;
    		});
    	});
    }
    I don’t give you plug’n’play code because these forums are meant to get hints and then use the own mind to do the rest.
    Last edited by VIPStephan; 01-31-2010 at 07:30 PM.

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry, I don't understand, i don't know squat about js, really. is there not just a way i can simply have the image get clicked, and a line of text somewhere else fades?

  • #4
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    Quote Originally Posted by carsonkahn View Post
    sorry, I don't understand, i don't know squat about js, really. is there not just a way i can simply have the image get clicked, and a line of text somewhere else fades?
    give the image an id in the img tag

    <img id="yourIDname" src="imgesrc.jpg">

    Also give the element(div span etc...) an id in the element tag

    <div id="divID">this text will fade</div>

    Now in your javascript you have to call the image with id="yourIDname" like this:
    document.getElementById("yourIDname").onclick=function(){document.getElementById("divID").style.opac ity=.1}


    This won't fade it like an animation. You have to make a function that will slowly change the opacity, but this is just to show you how you add the click to the image that makes a function to change the other div style

    here's a fading script
    Code:
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    
    <script type='text/javascript'>
    <!--
    
       if(!o)var o={};
      if(!o.fn)o.fn={};
    
      o.fn.JS = function(e){
      
    var elm,s,INT,u,temp,toCml,setP;
        elm=document.getElementById(e);
        s=elm.style;
        INT=parseInt;
        u='px';
        
    temp=function(elm){for(i in elm){var temp=elm[i].split(':');s[ToCommandLine(temp[0])]=temp[1]
    	         } 
           };
    
        ToCommandLine=function(s){ if(s.indexOf('-')==-1){return s}else{var a=s.split('-');return a[0]+a[1].substr(0,1).toUpperCase()+a[1].substr(1)} };
       
     setP=function(){ var pos=s.position;if(!(pos=='absolute'||pos=='relative'))s.position='relative'};
    
        return {
           setCSS:function(n,v){if(n.indexOf(':')!=-1){temp(n.split(';'))}else{s[ToCommandLine(n)]=v}},
           getCSS:function(n){return s[ToCommandLine(n)]},
           show:function(){s.visibility='visible'},
           hide:function(){s.visibility='hidden'},
           visibility:function(v){s.visibility=v},
           fadeBgGry:function(a){
             var b,t,elm=this,f=(a)?"fedcba9876543210":"0123456789abcdef";
             if(!elm.i)elm.i=0;if(elm.i>=f.length){elm.i=0;clearTimeout(t)}else{
               clearTimeout(t);b=f.charAt(elm.i++);
               elm.setCSS('background-color','#'+b+b+b);
               t=setTimeout(function(){elm.fadeBgGry(a)},40);
             }
           }
        };
      };
    
      var bg = function(e) {return new o.fn.JS(e)}
    </script>
    
    <style type="text/css">
    a { color:orange }
    </style>
    
    
    <div id="a0" calss="lays"
         style="position:absolute;left:150px;top:110px;padding:2px;
                width:250px;height:20;clip:rect(0,250,20,0)">
     <a href="#" 
        onclick="bg('a0').fadeBgGry(true);this.blur()">org.jsgt.jKamo fadeBgGry</a>
    </div>
    
    <div id="a1" calss="lays"
         style="position:absolute;left:150px;top:150px;padding:2px;
                width:250px;height:20;clip:rect(0,250,20,0)">
     <a href="#" 
        onmouseover="bg('a1').fadeBgGry(true);this.blur()" onmouseout="bg('a1').fadeBgGry(false);">org.jsgt.jKamo fadeBgGry</a>
    
    </div>
    Last edited by TinyScript; 01-31-2010 at 07:58 PM.

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    If i just post my HTML and CSS source, will someone please look at it? I didn't write the JS, and it's kinda unique the way it's done, and it doesn't seem to lend itself to the solution above... will you take a look?

    the index is here: http://dl.dropbox.com/u/3587374/CK/index2.html
    and the css is here: http://dl.dropbox.com/u/3587374/CK/css/style.css
    you'll find different javascript stuff locations in the index source code.

    bascially what i want is for there to be a "click the image" text center under the image that disappears (kinda "replaced" by the main text) when you click the image.

    the full site as it works right now is here:
    http://cld.ly/b318gv

    Thank you!


  •  

    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
    •