Solved

Data List Mouse Over Event

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

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Check my code out(2) 1 35
Office.Interop.Word Document - Detect Macros not working 16 28
Jquery autocomplete 10 31
XAML: Layout 8 9
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
Illustrator's Shape Builder tool will let you combine shapes visually and interactively. This video shows the Mac version, but the tool works the same way in Windows. To follow along with this video, you can draw your own shapes or download the file…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

744 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

12 Experts available now in Live!

Get 1:1 Help Now