Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Data List Mouse Over Event

Posted on 2010-09-21
9
Medium Priority
?
943 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 59

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 59

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
The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

 

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 59

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 59

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

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Video by: ITPro.TV
In this episode Don builds upon the troubleshooting techniques by demonstrating how to properly monitor a vSphere deployment to detect problems before they occur. He begins the show using tools found within the vSphere suite as ends the show demonst…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

670 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