Hover Over Image Otms

[Alanna 🥀🖤]

For my site, Adoxography, I have four images at the top where I would like to place OTMS. I want them to appear as normal images until you hover over them, so then the OTM information appears. I also, just to be clear, don't want them all to appear when one is hovered, I want them to appear separately when hovered over separately.

Before:

After:

This would be lovely! Thank you! Note I have the image codes in the Forum Wrapper template sheet right now.

[Alanna 🥀🖤]

Bump!

[Welshling]

Original thread < this is highly popular right now, and was originally requested by me lol. Hopefully I can try to help you with this.

I could try to re-write the coding you'd need for this transition to work, but what are the sizes of your images first please?

[Alanna 🥀🖤]

That isn't want I am looking for since my images are completely separate, not one image, and it isn't the banner. It is completely different than what Tumbleweed helped you accomplish.

[Welshling]

i know, like i said. it would take some re-working.

in theory all you'd have to do would be .fade_content{
position: relative;
top: 8px;
background-color: white;
border: 1px solid black;
color: black;
font-size: 1em;
padding: 18px;
width:600px;
height:280px;
text-align:left;

add one of those for each of your images, then add the corresponding info to your wrappers.

[Alanna 🥀🖤]

Um, I did it but it didn't do anything just like my attempt. Plus, I don't even know where to host the information that I want to appear.

[Alanna 🥀🖤]

Bump!

[Todge]

The images would need to be a background image of a cell containing the hidden content, then a mouseover event would display it.

First, put this in your Global Header..

<script type="text/javascript">
<!--
function mouseImageOn(cell)
{
cell.getElementsByTagName('div')[0].style.display = '';
return;
}

function mouseImageOff(cell)
{
cell.getElementsByTagName('div')[0].style.display = 'none';
return;
}
// -->
</script>

Then display your images like this...

<div onmouseover="mouseImageOn(this)" onmouseout="mouseImageOff(this)" style="background-image: url(http://img46.imageshack.us/img46/2564/bmt.gif); height: 66px; width: 136px; padding: 10px;">
<div style="height: 66px; width: 136px; background-color: #eeeeee; display: none;;">Hello World</div>
</div>

The blue text is your image URL and the red numbers are the dimensions of your image minus 20.

Repeat with as many images as you wish.

[Alanna 🥀🖤]

Thanks, Todge!

Two questions though, it seems to only register the hover on the very top of the image, can it register on the entire image? Also it appears really fast, can that be slowed down?

[Todge]

Scratch that then, and try this..

Put this in your Global Header..

<style type="text/css">
.infofade { color: transparent; background-color: transarent; transition: background-color 1s, color 1s; -webkit-transition: background-color 1s, color 1s; }
.infofade:hover { background-color: #eeeeee; color: #000000; }
</style>

And display your images like this...

<div style="background-image: url(http://img46.imageshack.us/img46/2564/bmt.gif); height: 66px; width: 136px; padding: 10px;">
<div class="infofade" style="height: 66px; width: 136px;">Hello World</div>
</div>

This will not work in IE8 and earlier, not sure about IE9.

[Alanna 🥀🖤]

It's not working for me and I am using Chrome.

[Todge]

Could you leave a link with the code in place please...

Also, what version of Chrome are you using.. I'm pretty sure the the transition style is not supported by older versions of that browser.

[Alanna 🥀🖤]

adoxography.boards.net/

Um, the product version says 29.0.1547.66. I'm not exactly sure what version.

[Todge]

Let's try opacity instead...

Replace the CSS I gave you with this...

<style type="text/css">
.infofade { background-color: #eeeeee; opacity: 0; transition: opacity 1s; -webkit-transition: opacity 1s; }
.infofade:hover { opacity: 1; }
</style>

and display your images like this...

<div style="background-image: url(http://img46.imageshack.us/img46/2564/bmt.gif); height: 66px; width: 136px; padding: 10px;">
<div class="infofade" style="height: 66px; width: 136px;">Hello World</div>
</div>

[Alanna 🥀🖤]

Hmm... still isn't working... the very first one you gave me worked lovely minus that it didn't register on the entire image.