(html) Image pop-up on mouse-over?

[Water Crystals]

I have a custom page where I'd like to display many rows of small images (roughly 50x50 pixels). The idea is that when the mouse hovers over a small image, a larger image pops up that will basically be visual info/etc about the item. This is not simply a resizing; I don't want a bigger version of the small image, but a new image entirely and of larger size. I want the sizes of small and large images to be as they are made, so I don't have to code the width/height myself.

I've searched endlessly and haven't found any HTML that can help me do this. I also want to keep the code as short as possible, given I intend to use this for approximately 160 images (with hundreds more over time - I'll be using this for a Pokemon Pokedex on my RPG site). If there's an easier way to show a database of small images (that pop-up a larger one on mouse-over), please tell me as I am open to better methods. A custom page is my best idea for that so far, as achieving this in a thread seems more frustrating/impossible.

Would really appreciate it if someone can help me out because I'm at a loss of how to achieve this.

[Water Crystals]

Bump?

[Todge]

There are several ways of getting that effect, but here's one...

<img class="pop_it" src="URL OF IMAGE" data-pop="URL OF POP-UP IMAGE">
<img class="pop_it" src="URL OF IMAGE" data-pop="URL OF POP-UP IMAGE">
<img class="pop_it" src="URL OF IMAGE" data-pop="URL OF POP-UP IMAGE">

<div id="image_pop"><img src="*"></div>


<script type="text/javascript">

$('#image_pop').hide();

$('.pop_it').each(function(){
$(this).mouseover(function(){
var src = $(this).attr('data-pop');
$('#image_pop>img').attr('src',src);
$('#image_pop').toggle();
});

$(this).mouseout(function(){
$('#image_pop').toggle();
});
});

</script>

[Water Crystals]

Yes, that's what I wanted! Thanks, however I tested this with a large list of images (as I intend to use) and the popped up image appears at the bottom of the list with it pops up. So if I hover the mouse over the first item in a large list, you can't even see the popped up one as it's at the bottom.

Did I miss something, or...?

[Todge]

You can move the orange part of the code where-ever you like, as that is the cell the pop-up image will appear. BUT, assuming you'd like it to appear in the same place of the screen regardless of the scroll position, you'd need to use CSS to give it 'fixed' position and the distance from the top and left of the screen you'd like it to appear instead..

#image_pop { position: fixed; top: 300px; left: 200px; }

[Water Crystals]

Maybe it's just one of those weeks, but I'm still confused.

Does the fixed position simply mean area of screen, but not page? Such as, if I set it to the middle of the screen, when an icon is hovered over will the popped up image always be visible without scrolling?

I'm also doing this all in html, on a custom page. If I can't add CSS right into that, could you please tell me exactly where the CSS needs to go? Locations of codes is not something I'm very good at figuring out, sorry. Really appreciate all the help though, and am excited to get this working!

[Todge]

CSS can be added to the page using HTML using the <style></style> tags, so you can just wrap the code snippet I gave you in them, or you can add it directly to the div with...

<div id="image_pop" style="position: fixed; top: 300px; left: 200px;"><img src="*"></div>

And yes, a fixed position will make the pop-up appear in the same position on the screen regardless of scroll position. So if you omit the top and left attributes, the image would always pop-up in the top left of the screen, no matter what.

[Water Crystals]

This was working wonderfully until recently. Now the popped-up images (with the exception of the first one) flashes rapidly - so fast it can't be read and should come with an epilepsy warning. Does anyone know how to fix this so the images just display, not flash? I need this fixed ASAP as my site launches on the 2nd of January and it's a key function my members will need.

[Ulises]

Can we get a link to the custom page?

[Water Crystals]

It's here: zyver.boards.net/page/pokedex but the site is on Maintenance Mode (I don't want to take it off until the RPG officially launches in a few days; don't want it public until then)