Multiple onMouseOver Events.

[JAG14]

Hi Everyone,

I have googled and TTS'd the ass out of this one and i'm stumped.

This is a page modification problem with Javascript.

Originally, my page Vil.aspx had 1 Large Image and a series of thumbnails. When the JS 'Mouseover' event of the Thumbnails fired, the Large Image changed to the Large Version of the Thumbnail.

I now need FOUR large images, and the thumbnails to change the large images all together.
For instance. If thumbnail 2 of 10 is 'Mouseovered' Then Large Image 1,2,3 and 4 should show Thumbs 2,3,4 and 5 respectively.
The only way I can see to do this is 4 firings of the function attached to onmouseover.. Is this correct to do? Or should I try to mod the function to do all four in one firing?

Please help as it's 04:34am on a Tuesday and Raining.

Thanks in Advance,

Jag14

[tt]'Very funny, Scotty... Now Beam down my clothes.'[/tt]
​

 

[jmeckley]

this sounds like a javascript problem, not an asp.net problem.

Jason Meckley
Programmer

faq855-7190
faq732-7259

 

[JAG14]

Jason,

Technically it is a Javascript Problem, but since JS is commonly used in ASP.NET and the application is in ASP.NET. This is probably the best place for it.

I have sorted the problem by writing a JS function to change the all of the images and calling that function from the "onmouseover" event of the link.

ASP.NET Calling Code

        For i As Integer = 1 To d("iImageCount")
            lit.Text = lit.Text & "<img src=""/utils/image.aspx?idaccomm=" & d("idaccommodation") & "&amp;imageindex=" & CStr(i) & "&amp;fieldname=image&amp;width=60&amp;compresspct=90"" onmouseover=""thumbnailroll('mainpicture" & e.Item.ItemIndex & "','mainpicture2" & e.Item.ItemIndex + 1 & "','mainpicture3" & e.Item.ItemIndex + 2 & "','mainpicture4" & e.Item.ItemIndex + 3 & "','idaccomm=" & d("idaccommodation") & "&amp;imageindex=" & CStr(i) & "&amp;fieldname=largeimage','idaccomm=" & d("idaccommodation") & "&amp;imageindex=" & IIf((i + 1) > d("iImageCount"), CStr(i + 1 - d("iImageCount")), CStr(i + 1)) & "&amp;fieldname=largeimage','idaccomm=" & d("idaccommodation") & "&amp;imageindex=" & IIf((i + 2) > d("iImageCount"), CStr(i + 2 - d("iImageCount")), CStr(i + 2)) & "&amp;fieldname=largeimage','idaccomm=" & d("idaccommodation") & "&amp;imageindex=" & IIf((i + 3) > d("iImageCount"), CStr(i + 3 - d("iImageCount")), CStr(i + 3)) & "&amp;fieldname=largeimage');""" & " class=""thumb"" height=""40"" width=""60"" alt=""" & alttitle & """ title=""" & alttitle & """/>"
        Next

Javascript Function (in thumbRoll.js)

function thumbnailroll(image, image2, image3, image4, pms, pms2, pms3, pms4) {
    var i = document.getElementById(image);
    i.src = '/images/widgets/loadingimgs.gif';
    i.style.border = '1px solid #999999';
    i.src = "/utils/image.aspx?" + pms;
    var i = document.getElementById(image2);
    i.src = '/images/widgets/loadingimgs.gif';
    i.style.border = '1px solid #999999';
    i.src = "/utils/image.aspx?" + pms2;
    var i = document.getElementById(image3);
    i.src = '/images/widgets/loadingimgs.gif';
    i.style.border = '1px solid #999999';
    i.src = "/utils/image.aspx?" + pms3;
    var i = document.getElementById(image4);
    i.src = '/images/widgets/loadingimgs.gif';
    i.style.border = '1px solid #999999';
    i.src = "/utils/image.aspx?" + pms4;
}

This, however looks to be a damned long-winded way of doing things (effectively replicating a single function 4 times.)

Is there a faster/more efficient way of doing this?

Thanks

Jag14

[tt]'Very funny, Scotty... Now Beam down my clothes.'[/tt]
​

 

[jmeckley]

probablly, but my js skills aren't that great and I rely on jQuery to do all the ugly work for me. so in that regard I would start by using jQuery to select/manipulate the DOM elements.
and being that this is purely a js script issue I would ask in either the TT js forum, or if using jQuery the forums on jQuery's site.

asp.net is a server side technology, it doesn't really care what happens on the client, it only know about the request it receives and the response it sends. webforms and MVC are frameworks on top of asp.net, typically these frameworks render html, but that's not required either.

Jason Meckley
Programmer

faq855-7190
faq732-7259