onmouseovers not working for me...

Posted by Carpenter under Regular Expressions on 2/13/2010 | Views : 966 | Status : [Member] | Replies : 3
Can anyone help me to get the onmouseovers working in the below code?

I am loading html files to disblay as thumb-nails (one html file = one thumb-nail) , which also have popups tied to them - that is to say the thumb-nails have popups that appear when you hover over them.

One of my html file's content(full contents) looks like:

<div class='box'><a href="Shop/Product_Pics/car.jpg"><img id="thumb_entry_No0" runat="server" onmouseover="pop0.className='popup'" onmouseout="pop0.className='hidden_popup'" src='Shop/Product_Thumbs/Thumb_car.jpg' style="border:1px solid black;" alt='' title="Toy Car" longdesc='Shop/Product_Thumbs/Thumb_car.jpg'/></a> <div id="pop0" class="hidden_popup" runat="server"><p><img class="thumbs2" src="Shop/mid_size/mid_car.jpg" style ="border:1px solid black;" alt="" /> <br/>This old-fashioned wooden toy car can be made to order by a Crafts man who has a small shop in the Teddington area of West London. </p><p>Crafts-man: FG<br/>Description: Old style Toy Car<br/>Size: 4''W by 5''H by 6''L </p><p>Shop Price:&nbsp;&nbsp;£25 <br/>P&P:&nbsp;&nbsp;&nbsp;&nbsp;£8 (UK & IRE)</p> </div></div>


And I am loading the html pages / thumbs into my aspx page using:

<!-- infinite scroll gallery -->
<div class="ajaxscroll" id="example_horizontal">
</div>
<script type="text/javascript" src="js_4_scroll/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js_4_scroll/jquery.ajaxscroll.min.js">
</script>
<script type="text/javascript">
$(function () {
$('#example_vertical').ajaxScroll({
updateBatch: updateVertical
});
$('#example_horizontal').ajaxScroll({
horizontal: true,
batchNum: 9, // number of items/thumbs to start with - maybe +
batchSize: 1,
maxOffset: 18, // number of items/thumbs to display - maybe
updateBatch: updateHorizontal
});
});

function updateHorizontal($obj) {
$obj.load('hdata/' + $obj.attr('offset') + '.html');
// $obj.load('hdata/0.html');

}

function updateVertical($obj) {
$obj.load('vdata/' + $obj.attr('offset') + '.html');
// $obj.load('hdata/0.html');
}
</script>
<!-- end of scroll gallery -->


The problem is that the thumb-nails' popups can be triggered to appear from a pic/element on my aspx page - outside of the loaded html files' area -
using the same "onmouseover="pop0.className='popup'"" code, but when the code is inserted into the aspx page from the html file, the code somehow doesn't work
right so as to display the popups... Any tips on how to get the popups to show when I hover over one of the loaded thumb-nails?




Responses

Posted by: Abhi2434 on: 2/13/2010 [Member] [Microsoft_MVP] [MVP] Silver

Up
0
Down
what are you doing... ?
onmouseout="pop0.className='hidden_popup'"

I think you should better go for a javascript method rather than doing this like this. Other than that, what problem you are getting, can u put a debugger just inside the block and see whats wrong with this. But surely, I would at least use onmouseout="javascript:...;'" to say what I am writing just after it.

The javascript protocol will say what you are writing just after the event.





www.abhisheksur.com

Carpenter, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Nishithraj on: 2/18/2010 [Member] Bronze

Up
0
Down
Whether it's working with IE ?
Have you tried in any other browsers apart from IE?

Mark this as answer, if it is.....

With regards
Nishithraj Narayanan

Carpenter, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Carpenter on: 2/18/2010 [Member] Starter

Up
0
Down
Thanks from the help guys and sorry for taking so long to reply.

but onmouseover="javascript:alert('this is a test');" doesn't even work for me when loaded from the html file.

I tried it like this - in the html file being loaded into the aspx page:

<div class='box'><a href="Shop/Product_Pics/car.jpg"><img id="thumb_entry_No0" runat="server" onmouseover="javascript:alert('this is a test');" onmouseout="pop0.className='hidden_popup'" src='Shop/Product_Thumbs/Thumb_car.jpg' style="border:1px solid black;" alt='' title="Toy Car" longdesc='Shop/Product_Thumbs/Thumb_car.jpg'/></a><div id="pop0" class="hidden_popup" runat="server"><p><img class="thumbs2" src="Shop/mid_size/mid_car.jpg" style ="border:1px solid black;" alt="" /> <br/>This old-fashioned wooden toy car can be made to order by a Crafts man who has a small shop in the Teddington area of West London. </p><p>Crafts-man: FG<br/>Description: Old style Toy Car<br/>Size: 4''W by 5''H by 6''L </p><p>Shop Price:&nbsp;&nbsp;£25 <br/>P&P:&nbsp;&nbsp;&nbsp;&nbsp;£8 (UK & IRE)</p> </div></div>



The alert worked when triggered from an onmouseover on a p tag on my aspx page, but when the code is inserted into the aspx page from the html file, the code somehow doesn't.


For Abhi2434 - tried to call a function with an alert("test"); but that too isn't working from the loaded html...


For Nishithraj - I have only tested it in IE 8



Carpenter, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response