Moving an image around on mouseover [newbie] [Archive] - HTML Forums

View Full Version : Moving an image around on mouseover [newbie]

Anastasis

02-26-2004, 08:01 AM

Hello, as you will be able to tell, I'm a complete newbie and am looking for some help (and hopefully found the correct forum to ask it in now ;) )

My sister-in-law has asked me to produce a website for her puppet theatre which she does part-time with her friend. I have been drafting the site (which is my first ever) using the web publishing capabilities of PagePlus 9. OK, for you professionals or experienced web designers I know this isn't the de facto solution for web design but neither do I expect it to be. I've used it for a while for DTP stuff and found I like it, and for a DTP package it has some reasonable web design functions.

I know I need to supplement that with some things you cannot do easily in PP9, one of which is to have an image (a graphic of a puppet) move to another location on the screen every time the user does a mouseover. The locations the image moves to need to be random between 3 or 4 pre-defined positions (except of course the one it is located on at the time).

Ideally, at the same time as the movement at the mouseover, I would also like there to be a brief sound (I guess from a small MP3?), although this sound would be the same for every mouseover. The idea of all of this is to have the users (potentially quite a few children) chasing a teddy glove puppet character who pops up behind different letters in a logo, but never being able to catch him (due to the movement when doing a mouseover).

I think this should be possible and am hoping someone can direct me to how to do it or at least give me a link as to where I can find out more.

Thanks in advance for any help given on this

coothead

02-26-2004, 03:26 PM

Hi there Anastasis,

here is a very simple to customize example...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta content="mshtml 6.00.2800.1264" name="generator" />
<title>Image mover</title>

<style type="text/css">

</style>

<script type="text/javascript">

</script>

</head>
<body>

<div id="one" onmouseover="this.style.display='none';document.getElementById('two').style.display='block';StartMediaUp();"></div>
<div id="two" onmouseover="this.style.display='none';document.getElementById('three').style.display='block';StartMediaUp();"></div>
<div id="three" onmouseover="this.style.display='none';document.getElementById('four').style.display='block';StartMediaUp();"></div>
<div id="four" onmouseover="this.style.display='none';document.getElementById('five').style.display='block';StartMediaUp();"></div>
<div id="five" onmouseover="this.style.display='none';document.getElementById('one').style.display='block';StartMediaUp();"></div>

<object id="player" height="0" width="0"classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="autoStart" value="true"/>
<param name="volume" value="100"/>
</object>

</body>
</html>

Just change the items shown in red to
suit your needs and/or add similar divs
if required.

Anastasis

02-26-2004, 06:02 PM

Thank you coothead for taking the time to provide this for me. It is very much appreciated.

I have imported the code you gave for use into the draft of my sister-in-law's website, but cannot get it to work.

I thought initially I would import it as you provided it so I could see what it is doing. The tool I am using, PagePlus 9 requires that you add an HTML code snippet to an existing web page, by pasting the Head and Body sections of the code into a separate memo boxes in a dialog window.

The problem is because this is my first ever website and I have only been doing it for 3 weeks, I am still very much a novice, so the reason it is not working is down to me rather than an error in your code. In fact, I know it is something clashing in the page I have inserted it onto as I have pasted your code into Notepad and saved it as an HTML page, then run it independently and sure enough I can chase but never catch your warrior character!

I managed to add a different code snippet for an image slideshow to another page on the site and that is working without problem, but I think with your code I must have made an error as nothing is being displayed at all. It should display the logo at the top and the menu at the side in the same way as it does on the other pages, but nothing is shown.

You can see the draft of the website here (http://www.puppetunes.co.uk) and can browse through the pages which all work. The "Puppets" page shows the slideshow with the other code snippet I mentioned above.

The erroneous page is here (http://www.puppetunes.co.uk/page6.html)

As you can see, for some reason it is completely blank despite containing the objects that are common on the other pages. I have looked at the generated source, but as I am a novice I cannot see any obvious error but there obviously is somewhere.

Sorry to be a pain, but if you are able to take a look and tell me I can try to correct it. BTW, are there any debugging tools for HTML to highlight where there are errors?

Incidentally, going back to the idea I had ... it is to do with the little teddy puppet in the top logo. I am wanting to make that appear from behind different letters based on the mouseovers. My original idea was to have the image pop out from behind the letters at different angles, but I realise now having seen your code and thought more that to do this would require more than one image and some way of hiding the previous image, unless that is there is a way of rotating the image as well as repositioning it's x/y location? However, not to worry, I think I can adapt it to do something similar with the same image.

For now, though I just need to find out what is wrong.

Thanks again in anticipation that you are able to help with this. Apologies if I have made a silly mistake somewhere.

coothead

02-26-2004, 11:51 PM

Hi there Anastasis,

The reason that it does not show
is because all your divs are made...
display:none by my
style sheet. So change this...

<style type="text/css">
<!--
div
{
position:absolute;
display:none;
width:65px;
height:65px;
background:url('http://mysite.freeserve.com/achelous/warrior.gif') no-repeat

to this...

<style type="text/css">
<!--
.main
{
position:absolute;
display:none;
width:65px;
height:65px;
background:url('http://mysite.freeserve.com/achelous/warrior.gif') no-repeat

and then add...

class="main"
to the my 5 divs

:cool:

Anastasis

02-27-2004, 02:42 AM

Originally posted by coothead
The reason that it does not show
is because all your divs are made...
display:none by my
style sheet.Thanks coothead - crumbs, do you normally stay up that late? I hope not on my account! I don't have time now, got to go off to work, but I'll check it out later and let you know - much appreciated!

Anastasis

02-27-2004, 07:59 PM

Well I've got it working - almost (http://www.puppetunes.co.uk/page6.html).

I've managed to change your code to reposition the image movement along a straight line at the top of the page. Also, I've added a different wav sound effect.

However, I have tried changing to my own gif image, but cannot get this to work. Your image is still showing albeit cropped because I have changed the height and width to match my gif. I don't know why but perhaps you could advise on this one? Also, is it possible to get the gif to display behind the logo text? Is there a property of the object to do that?

Thanks again for all your help - I'm learning (slowly)!

coothead

02-28-2004, 03:35 AM

Hi there Anastasis,

You will either have to remove my
background or...
comment it out correctly thus

/* background:url('http://mysite.freeserve.com/achelous/warrior.gif') no-repeat */

As for your image teddytickle.gif
I was unable to locate it for testing purposes :eek:
You do not appear to have it in the same
directory as your page6.html file

So I suggest that you either move it or
failing that give it the full url.

I hope that this helps :D

Anastasis

02-28-2004, 05:11 AM

Thanks coothead for your help again. You should find it all working now.

I have previously done some Delphi programming, and although they have their similarities, Javascript is quite a bit different in its syntax.

On the comments, I got confused with the // inline commenting you can do in Delphi. The other thing I think has flummoxed me is that I believe (at least by experimenting) that Javascript is case specific and that there is a difference between 'This' and 'this'.

Also, I'm confused over when you single quote, double quote and don't quote at all. For example, in the definition of background:url why when specifying a URL it is in single quotes but when a local file it has no quotes? Also, why a colon ( : ) between background and url and not a dot ( . )? Again, what designates when something has single quotes and when double?

As you can see I have much to learn but I will get there gradually. Thanks for the help and advice you have given.

Incidentally, one last question: is it possible to make the image show behind the Puppetunes text logo rather than in front? Thanks again :)

coothead

02-28-2004, 08:48 AM

Hi there Anastasis,
'Incidentally, one last question: is it possible to make the image show
behind the Puppetunes text logo rather than in front? Thanks again'
Unfortunately no...mouseover would not work. To achieve that,
would mean making individual animations - see attachment - for each letter :eek:
Personally, I think that young children will be quite amused
with your image above the logo.

Anastasis

02-28-2004, 07:03 PM

Thanks Coothead for that. Yes, I can see what you mean.

Just to say I have really appreciated all the help and effort you have given me with this little project. I couldn't have got to where I have so quickly without what you have shown me. :cheers:

coothead

02-28-2004, 07:17 PM

It was my pleasure ;)