Find your solution!

DMazz · 10-Sep-2009, 06:35 PM #1

I have two javascripts that run one right after the other to come up with an animated avatar. Let's just treat them as one for moment. Is there a way to float an image right over the top of the avatar?

In other words, is there a way to make the <script> information the background, perhaps even called up as part of a <div> in CSS so that an image can float right over the top.

How in the HELL do you do that? Here is the .js BTW - if you have any tips on how to get this into one .js file, I would appreciate it:

<script language="JavaScript" type="text/javascript" src="http://vhss-d.oddcast.com/voki_embed_functions.php"></script><script language="JavaScript" type="text/javascript">AC_Voki_Embed(179, 240, '8e8b9ac10e4d30727a743ca8adc70094', 1739359, 1,'', 0);</script>

skyhigh007 · 10-Sep-2009, 09:34 PM #2

What kinda of animation are you trying to achieve? You might want to use Jquery

DMazz · 10-Sep-2009, 10:15 PM #3

The animation is done alreasy, it's a speaking avatar provided by VOKI. You may want to go to voki.com to see the avatars they have available for free.

All I want to do is I want to be able to float a small image over the top of the avatar to brand the avatar with some of my website's styling.

tomdkat · 14-Sep-2009, 11:39 AM #4

You can probably achieve this using absolute positioning and maybe a z-index value for the PNG image to make sure it overlays the avatar, as you want.

If you do this, you will want to make sure the parent element has relative positioning specified so the absolutely positioned PNG image will be positioned relative to the parent element.

Here is a HTML test case which illustrates the general idea:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>PNG overlay</title>

<style type="text/css">
#content {
  border-top: 1px solid white;
position: relative;
  width: 500px;
  height: 100px;
  margin-right: auto;
  margin-left: auto;
  background-color: #66ffff;
  text-align: center;
}

#PNG-overlay {
  border-style: solid;
position: absolute;
  top: 0px;
  left: 150px;
  width: 40%;
  height: auto;
  background-color: #cc0000;
  opacity: 0.635;
}

</style>
</head>
<body>
<div id="content">
<h2>JavaScript stuff goes in here</h2>
<div style="color: yellow;" id="PNG-overlay">
<h1>PNG</h1>
</div>
</div>
</body>
</html>

Hope that helps!

Peace...

DMazz · 15-Sep-2009, 12:01 PM #5

You my friend are a freaking genius. Thank you!

I have two more questions:

1. Is your profile picture that of yourself or of Neil Peart ( drummer for Rush)!

2. Is there a way that I can put the script code in the head of my document rather than in the <h2> </h2> space and if so, how would I call up that function within the <h2> </h2> space. The reason I ask is because this javascript is affecting the javascript of another function called phplivehelper. Phplivehelper has to be the last script in my head so as not to be affected. Please let me know. Thanks.

tomdkat · 15-Sep-2009, 12:17 PM #6

Quote:

Originally Posted by DMazz

1. Is your profile picture that of yourself or of Neil Peart ( drummer for Rush)!

Yep.

Quote:

2. Is there a way that I can put the script code in the head of my document rather than in the <h2> </h2> space and if so, how would I call up that function within the <h2> </h2> space. The reason I ask is because this javascript is affecting the javascript of another function called phplivehelper. Phplivehelper has to be the last script in my head so as not to be affected. Please let me know. Thanks.

Hmmm, I'm not sure. I don't have time to look into it now but see if the JavaScript "onload()" function can be called on elements other than <body>. Other than that, you'll have to contact the VOKI folks to see what your options are. Or someone else might have an idea.

Peace...

DMazz · 15-Sep-2009, 12:20 PM #7

Thank you for your help. I really do appreciate it.
BTW - We share the same great taste in music!

tomdkat · 15-Sep-2009, 12:26 PM #8

"Living in the Limelight,
The universal dream,
For those who wish to see...."

Peace...

DMazz · 15-Sep-2009, 12:30 PM #9

Would you believe the next lines after yours is what I put as my quote in my highschool yearbook...Those who wish to be must put aside the alienation. Get on with the fascination, the real relation, the underlying theme.

Yes, my friend - it was fate that brought you to solve my problem!

tomdkat · 15-Sep-2009, 12:31 PM **#10**

LOL

Peace...

DMazz · 15-Sep-2009, 12:34 PM **#11**

Take care tomdkat Peart. I will mark this thread as solved.
DMazz.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Search
Search for: