ASP.NET - how to set mouseover for my below image

Asked By mani on 23-Jan-12 06:38 AM
hi i have below image that is displayed from database table..
now i have to display only its alternate text and set mouseover to display this image in popup ..any help???

<a target="_self" href="view-source:http://www.gmail.com/"/><img src="data:image/jpeg;base64,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" alt=""/><br/></span>
 
D Company replied to mani on 23-Jan-12 06:47 AM
Hello Mani,

first you have to set alternate text property of your image, than save it in DB, as you are saving the image.
and the time when you bind the image show only alt text.

Hope this will help you!!

Regards
D
dipa ahuja replied to mani on 23-Jan-12 06:52 AM
You can use lightBox

Step 1: Download the lightBox
<http://www.huddletogether.com/projects/lightbox2>
 
Step 2: Add the css and jscripts
 
<%--javascript references for lightbox--%>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
  
<%--stylesheet for lightbox--%>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
 
Step 3: add the images you want
<%--single image hyperlink--%>
<div>Single Image<br /><br />
   <a href="images/image-1.jpg" rel="lightbox" title="Plant Life">Look at This Plant</a>
</div>
<%--Multiple images--%>
<a href="images/doves.jpg" rel="lightbox[roadtrip2]"
title="American Goldfinch">
<img src="images/doves.JPG" width="60" height="60" alt="" /></a>
    
<a href="images/11.jpg" rel="lightbox[roadtrip2]"
title="Mixed Birds">
<img src="images/11.JPG" width="60" height="60" alt="" /></a>
    
 
 
mani replied to dipa ahuja on 23-Jan-12 07:24 AM
hi thanks for u r reply..but is there any simple method  for anchor tag like
imagebutton as

<asp:ImageButton id="ImageButton1" runat="server" AlternateText="sss"
OnMouseOver="src='dedu.jpg';"
OnMouseOut="src='extr.jpg';">
</asp:ImageButton>
dipa ahuja replied to mani on 23-Jan-12 07:30 AM
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $('img').mouseover(grow);
    $('img').mouseout(shrink);
  });
 
  function grow() {
    $(this).css('height''240px');
    $(this).css('width''240px');
    $(this).css('filter''');
    $(this).css('-moz-opacity''');
    $(this).css('opacity''');
  }
 
  function shrink() {
    $(this).css('height''100px');
    $(this).css('width''100px');
    $(this).css('filter''alpha(opacity = 50)');
    $(this).css('-moz-opacity''0.5');
    $(this).css('opacity''0.5');
  }
</script>

  <img id="i1" style="filter:alpha(opacity = 50);-moz-opacity:0.5;opacity:0.5" src="images/1.jpg" width="100" height="100" alt="" />
  <img id="i2"  style="filter:alpha(opacity = 50);-moz-opacity:0.5;opacity:0.5"  src="images/2.jpg" width="100" height="100" alt="" />


mani replied to dipa ahuja on 23-Jan-12 07:46 AM
hi dear friend there is no anchor controll in u r code...
my requirement is when i mouseover on anchor controll i need to display image..

<a href="http://www.gmail.com" target="_self" >sssss</a>
   

. i am displaying image when  i  mouseover on anchor link...any help???
dipa ahuja replied to mani on 23-Jan-12 07:54 AM
but the code which is better than using the anchor tag. just try it, its giving nice effect also
mani replied to dipa ahuja on 23-Jan-12 07:59 AM
hi thanks for u suggesions...but i am displaying some text from anchor tag..in pageload...so i will mouseover on that text to display image..
for example i will display only sssss  link below and i will display image when mouseover on it...

<a href="http://www.gmail.com" target="_self" >sssss</a>
   
kalpana aparnathi replied to mani on 23-Jan-12 08:47 AM
hi,

Try this example code:

<a href="" onmouseover="ShowImage('PathToTheImage')" onmouseout="HideImage()">Move your mouse over here!!!</a>
  
<img id="popupImage" src="" alt="Popup image" style="display: none"/>
 
 
And this is the javascript required:
 
<script type="text/javascript">
  function ShowImage(src)
  {
    var img = document.getElementById('popupImage');
    img.src = src;
    img.style.display = "block";
  }
  function HideImage()
  {
    document.getElementById('popupImage').style.display = "none";
  }
</script>
dipa ahuja replied to mani on 24-Jan-12 06:04 AM
There are so many ways you have already got in your previous posts.

But now there is only way to solve it. if you have any sample site where you have seen an example which you have seen then post it. so that we can give you the exact what you need