show/ hide image with link

[johnwboyd]

I want to have a link below the Money Guy on the left column here which will show/ hide him and I want him to appear (show) upon page load: http://www.leadexcel.com/ez/apply.asp

Something like this: http://www.dhtmlgoodies.com/scripts/...own-menu2.html but with just the graphic inside and white bg.

Thanks!

[rangana]

First, give your image an ID:

<img src="images/moneyman.gif" alt="&quot;Don't touch me there!&quot; -Money Man" height="297" width="264" border="0" id="myid">

...and add highlighted:

<div class="dhtmlgoodies_question" onclick="var el=document.getElementById('myid'); if(el.style.display!='none'){el.style.display='none';this.innerHTML='^ Show Money Man';}else{el.style.display='';this.innerHTML='^ Hide Money Man';}">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^ Hide Money Man</div>

Hope that helps.

[codeexploiter]

I've used jQuery framework for this purpose. You need to make the following adjustments in the code and your markup

1. You have to change your current markup in the following manner

<div id="mman"><a title="" href="#" onmouseover="Tip('Dont touch me there! -Money Man', TITLE,'' , BGCOLOR, '#CC0000', FONTCOLOR, '#FFFFFF', FONTWEIGHT, 'bold', FADEIN, 0)" onmouseout="UnTip()"><img src="apply.asp_files/moneyman.gif" alt="" border="0" width="264" height="297"></a></div>
	</div>
	<div id="sh" class="dhtmlgoodies_question">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;^Hide Money Man</div>

2. You need to include the jQuery library in your page which can done directly from the google server. Insert the following code as the first script file inclusion in your page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

3. Insert the following code inside a script block

$(document).ready(function(){
 	$('#sh').click(function(){
		if($(this).text().indexOf('Hide')!= -1){
			$(this).text("      v Show Money Man");
			$('#mman').fadeOut('slow');
		}else if($(this).text().indexOf('Show')!= -1){
			$(this).text("      ^ Hide Money Man");
			$('#mman').fadeIn('slow');
		}
	});
});

Now when you click on the HTML element whose id is 'sh' it will work just as a toggled switch.

The same thing can be done through the CSS display property but the animated effect will not be there the showing and hiding will happen suddenly.

I thought you'll find the jQuery library an interesting one as you use lots of custom functions in your page and through this library I feel that most of them can be replaced in an efficient manner.

Hope this helps.

[johnwboyd]

Thank you but it didn't work on my end. Maybe I did something wrong. Could you paste the entire working page code so I can check?

Thanks.

[johnwboyd]

Man I shoulda thought of this earlier... pulled this one out from a bag of tricks i did on another site. It's actually more user friendly. No clicking needed and the link is at the bottom how i wanted it!:

http://www.leadexcel.com/ez/apply.asp

I used the thumbnail viewer script from Dynamic Drive. The stop button actually loads a transparent gif the same size as the money man. ; )