Addding the AddThis button to a Div container?

[bassa]

Hello!

I am looking to insert a dropdown image of the AddThis.com button to my website, but it doesn't look like it works well.

I have this part at the top of my website (sort of like top navigation for site visitors to send the website to a friend, sitemap and also a way for them to bookmark my website):


<div id="icons">
<!--Top Navigation-->
<a href="test.html" class="sitemap">Sitemap</a>
<a href="test.html" class="bookmark"> (Instead of text, I would like the AddThis.com button placed HERE!) </a>
<!--Top Navigation-->
</div>

Now, as I wrote above, I would like to exchange the DropDown image the AddThis button provides with the usual "Bookmark" plain text since it not only looks better, but also provides many more options on the fly to my site visitors.

How do I do this?

http://www.ufodesign.dk/css.html


Cheers,
Bassa

[riptide]

there's no button on here.

[bassa]

Sorry! :rolleyes:


<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'bassa';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->


Cheers,
Bassa

[Medyman]

I'm confused...

Do you want to add the AddThis button, or replace it with a generic bookmarklet?

[bassa]

there's no button on here.


I'm confused...

Do you want to add the AddThis button, or replace it with a generic bookmarklet?

Ok, if you take a look at the webpage in the upper right corner, there's a text I've written "I want the AddThis button placed in this container!" inside a Div container, of what you call it.

Let's say that text is called "Bookmark" instead, so that visitors can bookmark my website, but instead of mere plain text, I thought it would be cool to place an image like this one:

http://www.addthis.com/

That "Add This" button is an image which drops a small menu when you hover your mouse on it.

I think my problem is, though, that the code I need to insert instead of the "Bookmark" text is a script that refers to the image of the button, and its operations, is all off-site (off of my site, linking to another site).

Ultimately, I think i just need to figure out how I can get that image added inside the Div container called "#icons" (see code in my first post).

Did that help clarify?


Cheers,
Bassa

[Medyman]

Ok, I'm still not getting it...

If you want to replace that text with the AddThis button, simple delete the link that you have and copy and paste this:


<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'bassa';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->

It should work.

If you break down the AddThis script, the relevant parts are this:


<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()">

<img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" />

</a>

Basically, it's just a linked image. If you want to change the image (or use text instead of an image), you can change the <img src=""> info.

[bassa]

Hehe, alright man, thanks!

Actually, it worked just fine, and I knew how to do that.

However, in order to better control the placement of the image, I wanted to use a CSS class.

Like I do here:


<!--Top Navigation-->
<a href="test.html" class="sitemap">Sitemap</a>


I wanted to have that AddThis button image wrapped inside my class="bookmark" - to better control the placement of the image.

If you look at it now:

http://www.ufodesign.dk/css.html

The AddThis button is too high and too far to the right.

So, if we break it down, I've placed this inside the #icons container:


<script type="text/javascript">addthis_pub = 'bassa';</script>
<a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>

And that works fine.

But where would I put the class="bookmark" in the above? Is it even possible? I am trying to use CSS containers and classes to control my layout, you see. :)


Cheers,
Bassa

[bassa]

I did it!

Thanks for the help everyone! :D


Cheers,
Bassa

[Medyman]

But where would I put the class="bookmark" in the above? Is it even possible? I am trying to use CSS containers and classes to control my layout, you see. :)

Ahh, sorry...I completely misunderstood you. Glad you got it figured out though.

For future reference to anyone that stumbles across this thread, you can add it directly to the anchor within the provided script:


<!-- AddThis Button BEGIN -->
<script type="text/javascript">addthis_pub = 'bassa';</script>
<a class="bookmark" href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[url]', '[TITLE]')" onmouseout="addthis_close()" onclick="return addthis_sendto()"><img src="http://s9.addthis.com/button1-bm.gif" width="125" height="16" border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
<!-- AddThis Button END -->

[bassa]

Anyway, it looks like this now. I've perfected the top navigation line, which now includes several new options; Print, Send, Sitemap (Oversigt) and the AddThis Bookmark button. I even changed the button image of the AddThis button which now looks much better IMO.

http://www.ufodesign.dk/css.html

But anyway, I think I may have to "resort" and "claim" this thread for further use when I need help with other things, Medyman.

You've helped me several times in the past, and if I need more help (which I'm very certain I will) I'll use this thread to ask my questions (unless it's preferred I start other new threads for such purposes).

And while we're at it, how do I place a script that forces my website to preload some pre-defined images?

As I am no longer using the Rollover images, but instead using CSS classes to control mouseover effects (such as in the main menu that includes 'Forside' and 'Produkter', etc.), I've noticed that the website only seems to "download" the images once you hover your mouse over them.

It would be nice to have them preloaded like they do in the Rollover Images effect, so that users wont have to "wait" for the OnMouseOver images.

Did that make sense? :cool:

PS: Oh! And is it possible to add Alternate Texts for when the mouse hovers over any of the main menu's? That is, I would like to add Alternate Texts to my CSS classes that controls the content of the main menu's.


Cheers,
Bassa

[Medyman]

You've helped me several times in the past, and if I need more help (which I'm very certain I will) I'll use this thread to ask my questions (unless it's preferred I start other new threads for such purposes).

Yes, it would be better if you started a new thread of each issue. Also, please post in the appropriate forum. All of your questions might not be CSS-related.


And while we're at it, how do I place a script that forces my website to preload some pre-defined images?


Do you have a script that you're using? Just Google for "pre-loading" scripts and you'll find one, if you don't have.

Alternately, you can use CSS Sprites (http://www.alistapart.com/articles/sprites) for the desired effect. The benefit of this is of course that you're not using JS.


PS: Oh! And is it possible to add Alternate Texts for when the mouse hovers over any of the main menu's? That is, I would like to add Alternate Texts to my CSS classes that controls the content of the main menu's.


You can't add them in via CSS. You would have to specifiy them in the HTML markup.