Fade effect help?

[carsonkahn]

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

[VIPStephan]

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:

<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:

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.

[carsonkahn]

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?

[TinyScript]

Originally Posted by carsonkahn

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

<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>

[carsonkahn]

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!