Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: Javascript
Hi,
 
Please check it I want image should be toggles and should show text in place of image when the mouse is over and it should show image again when mouse comes out and when we click on image it should direct to url. When I click on image it is not directing to other page...
 
Waiting for your valuable reply.
<html>
<head>
<style>
body{ margin:0px; padding:0px; background:#BF99C5 url(images/front2.jpg) no-repeat; }
#container{ margin-top:250px; margin-left:150px; padding:0px 0px 0px 0px; width:960px; background:#BF99C5; }
.wrapper{padding:0px; width:960px;}
.wrapper.topwrap{padding:0px; margin:0px auto; width:960px;}
.topwrap #img{margin:30px 0px 30px 20px; padding:0px; list-style:none; float:left; width:281px;height:138px;}
#img a{ margin:0px; padding:0px;}
#img a:hover{ margin:0px; padding:0px;  }
#img span{ margin:0px 0px 10px 0px; padding:0px; font-size:21px; font-face: Berlin Sans FB; color:#01090E;}
#desc{display:none;background:#D2D1E4;width:251px;height:143px; color:#01090E; cursor:pointer; padding:0px 10px 0px 10px;}
#desc p{ margin:0px; padding:10px 0px 0px 0px;}
</style>
<script src="script1/jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
 
$(document).ready(function(e) {
    $('#img a').bind('mouseenter',function(){
        $(this).toggle();
        $(this).next('#desc').toggle();
 
        });
    $('.topwrap #img #desc').bind('mouseleave',function(){
        $(this).hide();
        $(this).prev('a').show();
 
        })
 
});
 

</script>
</head>
<body>
<div id="container">
    <div class="wrapper">
    <div class="topwrap">
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Sole Selling</font></span></td></tr></table><br> <a href="C:\Users\admin\Desktop\vibgyor\sole.html"><img src="images/homepage-10.jpg" alt="img_1" height="143" width="281" border="0" /></a>
                <div id="desc" ><p>Delegation of work is the new age mantra. In plain words, it's outsourcing that offloads the work and results are always positive and favourable.</p></div>
    </div>
    <div id="img">
    <table><tr><td><span><span><font face="Berlin Sans FB" >Marketing Consulting Services</span></td></tr></table><br> <a href="C:\Users\admin\Desktop\vibgyor\homepage.html"><img src="images/hg-02.jpg" alt="img_2" height="143" width="281" border="0" /></a>
                <div id="desc" ><p>Delegation of work is the new age mantra. In plain words, it's outsourcing that offloads the work and results are always positive and favourable.</p></div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Project Launching</span></td></tr></table><br> <a href="projectlaunching.html"><img src="images/homepage - 03.jpg" alt="img_3" height="143" width="281" border="0" /></a>
                <div id="desc" ><p>You will launch many projects, but have time to finish only a few. So think, plan, develop, launch and tap good people to be responsible. So we do the things for you..</p></div>
    </div>
 

    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB" size="4">Management Training & Research</font></span></td></tr></table><br> <a href="management.html"><img src="images/homepage - 04.jpg" alt="img_4" height="143" width="281" border="0" /></a>
                <div id="desc" ><p>Delegation of work is the new age mantra. In plain words, it's outsourcing that offloads the work and results are always positive and favourable.</p></div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Estimation & Costing</span></td></tr></table><br><a href="cost.html"><img src="images/Homepage - 05.jpg" alt="img_5" height="143" width="281" border="0" /></a>
                                <div id="desc" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Event Management</span></td></tr></table><br><a href="event.html"><img src="images/Homepage - 06.jpg" alt="img_6" height="143" width="281" border="0" /></a>
                                <div id="desc" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Branding & Advertising</span></td></tr></table><br><a href="brand.html"><img src="images/Homepage - 07.jpg" alt="img_7" height="143" width="281" border="0" /></a>
                                <div id="desc" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Scope of Work</span></td></tr></table><br><a href="#"><img src="images/Homepage - 08.jpg" alt="img_8" height="143" width="281" border="0" /></a>
                                <div id="desc" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
    </div>
    <div id="img">
    <table><tr><td><span><font face="Berlin Sans FB">Residential</span></td></tr></table><br><a href="#"><img src="images/Homepage - 09.jpg" alt="img_9" height="143" width="281" border="0" /></a>
                                <div id="desc" ><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
                 sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div>
    </div>
    </div>
 
</div>
 
</div>
</body>
 
</html>
Posted 14-Nov-12 14:46pm
Edited 15-Nov-12 16:02pm
v4
Comments
n.podbielski at 15-Nov-12 3:47am
   
So what the problem?
selflearning at 15-Nov-12 20:33pm
   
when I click on image it not directing to other page...
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

its very simple to do.. you have to change ref of window to aonther page. its mean on dive click you have to change ref.
 
something like this.
 
<div id="img">
<table>
     <tr><td><span><font face="Berlin Sans FB">Sole Selling</font></span></td></tr>
</table>
 
 
 
<a href="C:\Users\admin\Desktop\vibgyor\sole.html"><img src="images/homepage-10.jpg" alt="img_1" height="143" width="281" border="0" /></a>
                
<div id="desc">onclick=" window.location = 'C:\Users\admin\Desktop\vibgyor\sole.html';">
<p>Delegation of work is the new age mantra. In plain words, it's outsourcing that offloads the work and results are always positive and favourable.</p>				
</div>
    
</br></div>
  Permalink  
Comments
n.podbielski at 16-Nov-12 2:51am
   
So instead of simple link, put change window location? I guess things always be more complicated.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You gave lot of code to research but I can't, put your directing url in 'text div' not in 'img div'.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 450
1 OriginalGriff 180
2 DamithSL 130
3 Dave Kreskowiak 120
4 Suvendu Shekhar Giri 110
0 OriginalGriff 7,645
1 DamithSL 5,614
2 Sergey Alexandrovich Kryukov 5,344
3 Maciej Los 4,961
4 Kornfeld Eliyahu Peter 4,539


Advertise | Privacy | Mobile
Web02 | 2.8.141223.1 | Last Updated 15 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100