Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Data List Mouse Over Event

Posted on 2010-09-21
9
Medium Priority
?
948 Views
Last Modified: 2013-12-16
How to control the mouse over event on a data list to show the thumbnail image to a div control at the same aspx page. I am using c#.
I get the thumb images fro sql server database
0
Comment
Question by:kyriak100
  • 5
  • 4
9 Comments
 
LVL 61

Expert Comment

by:HainKurt
ID: 33726998
probably you have a template...

on itemtemplate you should have a <tr> element

here you can add

<tr onmouseover="showThumb(<%# DataBinder.Eval(Container.DataItem,"imgID") %>">
...
</tr>

and here is a div

<div id=imgThumb></div>

<script>
function showThumb(id){
  var imgDiv = document.getElementById("imgThumb");
  imgDiv.innerHTML = "<img src='/images/" + id + ".jpg'>";
}
0
 

Author Comment

by:kyriak100
ID: 33727779
Thanks For your answer.
But what I want is.

I have a datalist with thumbnails align horizontal. I have a pager to show on horizontal line 5 thumbs for each page.
On the upper of the page I have a large image.
I want when I hover place the mouse on the thumbnail image to show on the big image.
I am using c#

 
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 33727902
too difficult to visualize it and suggest something...

do you have a link for us to have a look instead of wasting time...
0
Visualize your virtual and backup environments

Create well-organized and polished visualizations of your virtual and backup environments when planning VMware vSphere, Microsoft Hyper-V or Veeam deployments. It helps you to gain better visibility and valuable business insights.

 

Author Comment

by:kyriak100
ID: 33728326
Yes Sir And again Thanks for your willing to Help

Here is the url I just fix
http://www.arhagelosnet.gr/DatalistMouse.aspx
As you see I want while I have the mouse overthe small image which is in a datalist control and retrieved from sql server database , to show it on the big image

Thanks
0
 
LVL 61

Accepted Solution

by:
HainKurt earned 1000 total points
ID: 33729699
i will look at tomorrow if you cannot find any solutions then...
0
 

Author Comment

by:kyriak100
ID: 33731888
OK Sir,
I will be waiting
0
 
LVL 61

Expert Comment

by:HainKurt
ID: 33736765
here is a sample solution

try to implement this
<div style="border: solid 3 silver; padding:10px;" id=divThumb></div>
<div style="border: solid 3 silver; padding:10px;"><img id=imgThumb src=""></div>

<div>
<img src="http://www.arhagelosnet.gr/imagesgal/PER_900864_1.jpg" onmouseover="showThumb('http://www.bestbuy.ca/multimedia/Products/300x300/101/10146/10146066.jpg')">
<img src="http://www.arhagelosnet.gr/imagesgal/PER_905460_2.jpg" onmouseover="showThumb('http://www.bestbuy.ca/multimedia/Products/300x300/101/10137/10137964.jpg')">
<img src="http://www.arhagelosnet.gr/imagesgal/PER_905460_3.jpg" onmouseover="showThumb('http://www.bestbuy.ca/multimedia/Products/300x300/101/10138/10138751.jpg')">
<img src="http://www.arhagelosnet.gr/imagesgal/PER_906345_1.jpg" onmouseover="showThumb('http://www.bestbuy.ca/multimedia/Products/300x300/101/10146/10146568.jpg')">
<img src="http://www.arhagelosnet.gr/imagesgal/PER_906433_1.jpg" onmouseover="showThumb('http://www.bestbuy.ca/multimedia/Products/300x300/101/10138/10138751.jpg')">
</div>

<script>
function showThumb(src){
  var divThumb = document.getElementById("divThumb");
  var imgThumb = document.getElementById("imgThumb");
  imgThumb.src = src;
  divThumb.innerHTML = "<img src='" + src + "'>"; 
}
</script>

Open in new window

0
 

Author Closing Comment

by:kyriak100
ID: 33862598
Did not solve my problem
0

Featured Post

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In real business world data are crucial and sometimes data are shared among different information systems. Hence, an agreeable file transfer protocol need to be established.
Hello there! As a developer I have modified and refactored the unit tests which was written by fellow developers in the past. On the course, I have gone through various misconceptions and technical challenges when it comes to implementation. I would…
This lesson discusses how to use a Mainform + Subforms in Microsoft Access to find and enter data for payments on orders. The sample data comes from a custom shop that builds and sells movable storage structures that are delivered to your property. …
When cloud platforms entered the scene, users and companies jumped on board to take advantage of the many benefits, like the ability to work and connect with company information from various locations. What many didn't foresee was the increased risk…
Suggested Courses

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question