Results 1 to 5 of 5

Thread: show/ hide image with link

  1. #1
    Join Date
    Feb 2008
    Posts
    83
    Thanks
    26
    Thanked 1 Time in 1 Post

    Question show/ hide image with link

    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!

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    First, give your image an ID:
    Code:
    <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:
    Code:
    <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.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. The Following User Says Thank You to rangana For This Useful Post:

    johnwboyd (09-18-2008)

  4. #3
    Join Date
    Sep 2005
    Location
    India
    Posts
    1,627
    Thanks
    6
    Thanked 107 Times in 107 Posts

    Default

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

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

    Code:
    $(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.

  5. The Following User Says Thank You to codeexploiter For This Useful Post:

    johnwboyd (09-18-2008)

  6. #4
    Join Date
    Feb 2008
    Posts
    83
    Thanks
    26
    Thanked 1 Time in 1 Post

    Default

    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.

  7. #5
    Join Date
    Feb 2008
    Posts
    83
    Thanks
    26
    Thanked 1 Time in 1 Post

    Default

    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. ; )

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
  •