Rollys Mouseover with gif images.

User 251754 Photo


Registered User
178 posts

I'm doing something wrong here as not showing
I have 2 images (belinda_once and belinda_repeat) in a vsd folder called vsdanim

Here is the code, which must be wrong.
I actually don't want it as Rollys example. I just want belinda_once change to belinda_repeat on hover

<a href="http://coffeecup.com"
onMouseover="myimage.src='vsdanim/belinda_once.gif'"
onMouseout="myimage.src='vsdanim/belinda_repeat.gif'">
<img src="images/belinda_repeat.gif"
width=350
height=160
border=0
name="myimage">
</a>

Here is the test page
http://www.steveonline.info/test.html

Thanks for any help.
User 271657 Photo


Ambassador
3,816 posts

Steve, did you upload your images?
Edit > Add Files > add your folder (vsdanim) and then each image.

Add two gif images to VSD by adding them to a folder named images. (Ctrl + Alt + F) Tweak the code to reflect your image names and the actual folder you added them to if you didn't use "images".

I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 251754 Photo


Registered User
178 posts

Ok... Thanks for explaining that. Have got it working, but I don't want any of the images linking to a page. Have tried taking out what I thought would be right but then the images don't change.

this works.... but with a link

<a href="http://coffeecup.com"
onMouseover="myimage.src='vsdanim/belinda_once.gif'"
onMouseout="myimage.src='vsdanim/belinda_repeat.gif'">
<img src="images/belinda_repeat.gif"
width=350
height=160
border=0
name="myimage">
</a>

this doesn't... so what I have tried is wrong.


<onMouseover="myimage.src='vsdanim/belinda_once.gif'"
onMouseout="myimage.src='vsdanim/belinda_repeat.gif'">
<img src="images/belinda_repeat.gif"
width=350
height=160
border=0
name="myimage">

User 2273654 Photo


Registered User
775 posts

I put my blog on a page as an iframe
____________________________________________

<div id="container">

<div class="Object48344"><iframe name="stream"

margin-width=0 margin-height=0

src="http://www.workhorsepainting.com/stream/"

frame-border=0

width=900px height=1075px scrolling-vertical=yes scrolling-horizontal=no>

</iframe>

</div>
_________________________________________

You put in an html snippet with the size info that you want it and the link to your example and then you move it around on the pg to get it to render where you want it

I guess that yours would not be an iframe stream but an iframe anim or something like that
My CC S-drive site https://workhorsepainting.com
User 2273654 Photo


Registered User
775 posts

<iframe src="http://www.steveonline.info/test.html" style="border:0px #FFFFFF none;" name="belinda_once and belinda_repeat" scrolling="no" frameborder="0" marginheight="0px" marginwidth="0px" height="160px" width="350px"></iframe>

__________________________________________________________

Got this from your upper nfo and an iframe generating html; tool

_____________________________________________________________

http://7thspace.com/webmaster_tools/ifr … rator.html

_________________________________________________________

Perhaps this will help The upper code would be the html snippet then you take your label name and the box on your page and move it around to where you eant it to render on the pg you have to keep moving and previewing till you get it to be where you want it
My CC S-drive site https://workhorsepainting.com
User 251754 Photo


Registered User
178 posts

User 2273654 Photo


Registered User
775 posts

That I frame I was talking about would link to the first example pg that you had up where the whole pg was the mouse over animation you would just frame that into your pg
My CC S-drive site https://workhorsepainting.com
User 2073552 Photo


Registered User
1,625 posts

Steve Thomas wrote:
Thought I'd got it.
http://www.steveonline.info/test.html


You do, you just have to remove the < in-front of <onmouseover= That should not be there.
"An Apple doth not fall far from its tree, yet an orange does."

https://lbwebsitedesign.com - Responsive Web Design & Web Hosting Services.
http://helpsite.sirage.com - HTML5, CSS3 and CC Help Video Blog.
User 251754 Photo


Registered User
178 posts

I didn't notice that pesky little< being there.... Thanks. I just need it to work without having the image linking to a page now.

Thanks Greg for the info but was a little confusing for what I needed.
User 2273654 Photo


Registered User
775 posts

Steve I did the html snippet of your test pg onto one of my under contruction pgs you have to scroll down the pg a bit to see it. is like 400pixels high and 750 pixels wide the box deminsions You need to position it in a different place on the pg you made and change the deminsions so as to be able to make it the size you want then you just pull it around the pg and preview until you get it where you want it

http://www.workhorsepainting.com/townho … nting.html

After you get a look at it I will take it off of my site
My CC S-drive site https://workhorsepainting.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.