View Full Version : thumbnails with selected image mouse over

01-15-2010, 06:56 PM
Hi Guys

Love what you do on here its so helpful, this is my biggest reference site. I am going round in circles I am trying to create a thumbnail viewer with a onclick event to open a big picture on the same page but the big picture must have a mouseover which changes the image. As images cannot have an onclick event I have been playing around with java script which i am a complete beginner at.

I want to use a image as I want a high res thumbnail rather than an imagebutton. I have copied my code in, the thumbnail and the onclick work exactly how i want it to work, i have a commented out onmouseover on mouse out part at the bottom. Which also works, but not in conjunction with my thumbnails as I do not have a handle on each picture. Everyway I try to do it I fail wondered if anyone could give me some tips. The most important part is that there is mouseover on the selected image

here is my code

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="colourpicks.aspx.cs" Inherits="EdgyEdits.colourpicks" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script language=javascript>
var lastID = 0;
function SelectImg(id) {
if (lastID > 0) {
document.getElementById(lastID).className = "thumbNormal";
document.getElementById(id).className = "thumbSelected";
document.getElementById(0).src = document.getElementById(id).src;

lastID = id;


function LoadTrigger() {
window.onload = LoadTrigger;

function replaceme(which,img) {
which.src = img;
function restoreme(which,img) {
which.src = img;
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

Click a photo on the left to view full size.
<table border="0">
<td valign=top>
<img id=1 class="thumbNormal" src="edits/resizedme.jpg" width=120 onclick="SelectImg(1)">
<br><img id=2 class="thumbNormal" src="edits/leah.jpg" width=120 onclick="SelectImg(2)">
<br><img id=3 class="thumbNormal" src="edits/blackleah.jpg" width=120 onclick="SelectImg(3)">
<td width=15> </td>
<td valign=top>

<img id=0 src="" >

<%--<asp:Image ID="Image1" runat="server" ImageUrl="MakeThumbnail.aspx?file=edits/resizedme.jpg" onclick="ImageButton1_Click"/> --%>
<%--<div id="bigimage">
<img alt="dd" src="edits/resizedme.jpg" onMouseOver="javascript: this.src='edits/resizedme0.jpg';"
onMouseOut="javascript: this.src='edits/resizedme.jpg';" />--%>