Comodo style floating image please? - One for David McThingy?

Hey all (and I hope this gets the attention of David McThingy - I think he could do this),

I want to have some floating images on my forums for the sake of sponsors. I want them in the upper right corner of my forums.

I've seen the comodo site security thing in action and I think other than the fact that when you click that it opens a pop-up, I want one like theirs.

I want it to open a website in a new window. And I've read some CSS and Javascript how-tos but I daren't test them on a live forum and to be honest, perhaps i'm not that skilled.

Can anybody help out with this so I can give it a go in some way?

What I'd need to add to the forum, what I'd need to add to the CSS, and if it requires it, what I'd need to add in a javascript file?

Please please please help. I'd be impressed if you could.

Thank you in advance for any replies.

Here's some info I followed links from to get to some interesting topics that might give you some [ame=http://www.google.co.uk/search?sourceid=navclient&ie=UTF-8&rlz=1T4SUNA_enGB297GB298&q=comodo+style+floating+image]comodo style floating image - Google Search[/ame]

 

Well the first part is easy with CSS.

Make sure the parent element is position:relative; and that the div containing the image is position:absolute; and then for the class/id of the actual image or its containing div use this:

position: absolute;
bottom: 0px;
right: 0px;

As for the popup on hover. You can check javascript (jquery is a easy to use js library that'll surely have many hover popups).

 

Cheers Rocket 442 (hope the other 441 Rockets were used wisely).

Though to be honest it doesn't make much sense that.

So I need to add a div and set it to position:absolute; containing the image. And then in the css, for the class that I called the div, add position:relative;.

And then for something else, stick in

position: absolute;
bottom: 0px;
right: 0px;

Or is the above going in my CSS and then the parent element is the thing the DIV is in?

Sorry. I just don't know this stuff. :p

 

basically;

In your footer add this:

Code:

<div id="corner_logo"><img src=... /> </div>

then in your stylesheet add this css:

Code:

#corner_logo {
position: absolute;
bottom: 0px;
right: 0px;
}

also in the css, find the:
body and add this to it:

Code:

position: relative;

 

Thanks 442, I'll go and have a play now.

 

p.s. will I have issues with FIrefox/IE differences with this setup? I read on other forums that it was one of the problems that got in their way when trying this.

Though I'll give it a go and see for myself just in case you're not around to reply.

 

IE6 might have some problems, but you can add some javascript to help that out.

 

HTML:

#parent { position: relative; }
.child { position: absolute; }
.imageclassname { position: absolute; bottom: 0px; right: 0px; }

between the html body section

<div id="parent">
<div class="child">
<img class="imageclassname" src="path/to/image.jpg" width="" height="" alt="" />
</div>
</div>

Seems like it would work, just a quick piece thrown together.

Crap, Rocket beat me

 

Thanks to all, I'll have a play and see what I can do. What Javascript should I add to get IE6 working with it okay?

 

Okay, doing it this way, it loads in the bottom right corner, but doesn't float on the page. So when I scroll it stays down there.

So I'm going to try bryce's way to see if that gives a different output.

though if you or anybody can clarify if I'm doing something wrong, or suggest another way of doing it, then please do.

 

Doing it this way doesn't load the image even, let alone float it. I'm guessing it's something I'm doing and not the code. But can anybody clarify for me?

I've stuck the above code in the footer, and the CSS in the CSS. This is in a VB 3.8.2 by the way.

 

Daviiiiiiiiiiiiiiiiiiiiid, you there mate? Can you help?

 

Your CSS:

Code:

#urc {
display: block;
position: absolute;
right: 0;
top: 0px;
overflow: visible;
width: 300px;
height: 300px;
margin: 0 0 0 0;
padding: 0;
z-index: 9999;
border: none;
float: none;
}

Your HTML:

Code:

<div id="urc">
<a href="http://website.com" target="_blank"><img src="yourimage.gif" border="0" alt="Image Description" /> </a>
</div>

Is that what you were after?