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
Solved

Data List Mouse Over Event

Posted on 2010-09-21
9
925 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

More often than not, we developers are confronted with a need: a need to make some kind of magic happen via code. Whether it is for a client, for the boss, or for our own personal projects, the need must be satisfied. Most of the time, the Framework…
Wouldn’t it be nice if you could test whether an element is contained in an array by using a Contains method just like the one available on List objects? Wouldn’t it be good if you could write code like this? (CODE) In .NET 3.5, this is possible…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

840 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