Solved

Data List Mouse Over Event

Posted on 2010-09-21
9
922 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 51

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 51

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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 51

Accepted Solution

by:
HainKurt earned 500 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 51

Expert Comment

by:HainKurt
ID: 33736592
0
 
LVL 51

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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

ASP.Net to Oracle Connectivity Recently I had to develop an ASP.NET application connecting to an Oracle database.As I am doing it first time ,I had to solve several problems. This article will help to such developers  to develop an ASP.NET client…
Exception Handling is in the core of any application that is able to dignify its name. In this article, I'll guide you through the process of writing a DRY (Don't Repeat Yourself) Exception Handling mechanism, using Aspect Oriented Programming.
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Windows 10 is mostly good. However the one thing that annoys me is how many clicks you have to do to dial a VPN connection. You have to go to settings from the start menu, (2 clicks), Network and Internet (1 click), Click VPN (another click) then fi…

813 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now