# Code a floating graphic on edge of website?



## Robert H (Mar 27, 2007)

What the title says. See the photo.

I would like to have some floating alert graphic on my blog and eCommerce shop but do not know how to code it.


----------



## lindsayanng (Oct 3, 2008)

I have NO IDEA what you are talking about.. You posted a picture but i cant tell what you want.. Did you add that arrow?? Or do you want to have an arrow like that in your website?? Whats the link for that website that you want to model it after?? 

Does the image need to have a function? 

Whats the link to the website YOU have?


----------



## Robert H (Mar 27, 2007)

I would like to have a little chat bubble graphic floating on the outer right side of my site that says something like "Click here for blah blah blah".

The arrow points to where I would like the graphic. 

I do not have an example, I have only seen it once.


----------



## lindsayanng (Oct 3, 2008)

'm sorry, i'm still a tad confused.. Instead of teh arrow, draw the "bubble" that you want there.. your arrow is just pointing to a normal place in the top navigation.

Did you want it to hav any FUNCTION.. clickable?? do you want it to move, or be able to be closed.


----------



## jtannerc (Aug 20, 2008)

I think this is what you are looking for. You can make the image (speech bubble" say what you want and make it a link to the page that you want.

check this page out... Dynamic Drive DHTML Scripts- Site Logo Script (a.k.a Geocities Watermark) and look at the "LOGO" on the bottom right corner. The script can be used in any corner.

Hope that helps.


----------



## lindsayanng (Oct 3, 2008)

Ugh,.. Don't use that!! thats a bad idea, it just annoyed the customer.. 

I THINK that he was saying "floating" meaning not in a specific table but over one.. Although i could be wrong because you didnt give a lot of information at all


----------



## Robert H (Mar 27, 2007)

I am not sure how to go into much more detail although that floating bubble is close. See the thing is, normally graphics are contained within a table (in your site layout) and so it is very restrictive. I am trying to create an element on the outside of my website.

See the mock-up attached.


----------



## lindsayanng (Oct 3, 2008)

ohh well, that graphic is a tad more descriptive than that arrow... You use DIV tags and a Z-index. Using div tags allows you to layer your content in a 3D way..


----------



## jtannerc (Aug 20, 2008)

i guess i dont understand how what I sent is not what you want. If its close, but not it, what what are you looking for?
Use the Code from the page (Dynamic Drive DHTML Scripts- Site Logo Script (a.k.a Geocities Watermark)) and choose the "staticlogo4.js" file to get it in the upper right corner.
Edit the javascript file and where it says "var visibleduration=12" change that to 0 (zero) to make the image stay forever.

Also lindsayanng is right as well. That <div> idea will work as well. Possibly better. But the javascript thing is done for you, just copy, paste and edit some items.


----------



## lindsayanng (Oct 3, 2008)

the java is probably a bad idea only because people can disable java AND it takes longer to load.. plus, that following graphic is just not what you want..


----------



## Robert H (Mar 27, 2007)

How about like this from the apple website? This is more of what I am going for.

Apple - iPod shuffle - VoiceOver. Multiple playlists. 4GB.


----------



## jtannerc (Aug 20, 2008)

that can all be done in the layout and design.


----------



## lindsayanng (Oct 3, 2008)

Its an image that is coded like this:


> <img src="http://images.apple.com/ipodshuffle/images/features_shuffle_20090311.png" alt="iPod shuffle clipped." width="192" height="160" class="left shuffle"> <


Then they have a style sheet using CSS to absolutely place the graphic in that area. go to here and you can see the graphic: http://images.apple.com/ipodshuffle/images/features_shuffle_20090311.png


----------



## lindsayanng (Oct 3, 2008)

this is the code they used to position it:


> #features #shuff img, #features img.shuff { position: absolute; left: 540px; bottom: 3px; z-index: 1; }


----------

