FRIHOST FORUMS SEARCH FAQ TOS BLOGS COMPETITIONS
You are invited to Log in or Register a free Frihost Account!


How do I make pic change with onmouseover?





surbz00r
I need a line to get a pic to change when you move the mouse over it, and back when you pull it off. I know it's easy to find out, and I used to know, but I've forgotten, and I'm too lazy to find it. If someone just paste a line here, I'll probably figure out the rest myself! Thank you!
yokonative
Look. I know your fustration when you need a block of code to help you do things. However, moraly, I just cant give it to you, btu also becuase i'm not sure how you want things done. How you want things labeled and al the fine detial of yout website. you will most liely use java and all it is, it just declaring yout pics as some label and coding the rest in. its really quite simple and i really encourage you to find out how to do it by hand. when you do that, you can cut down on useless code, understand how your site works and have complete control obver things.
simplyw00x
Instead of shouting at you to use Google, I'll just post the script. Aren't I nice?
Code:
<!-- rollover images using javascript. http://www.designplace.org. -->
<!-- place the following code  within the <BODY> of your document -->

<script language="javascript" type="text/javascript">

normal_image = new Image();
normal_image.src = "path/img.gif";

mouseover_image = new Image();
mouseover_image.src = "path/img2.gif";


<!-- repeat the 4 lines above for any subsequent images. -->

function swap(){
if (document.images){
for (var x=0;
x<swap.arguments.length;
x+=2) {
document[swap.arguments[x]].src = eval(swap.arguments[x+1] + ".src");
}
}
}
</script>


Code:
<!-- Place this code where you want the rollover buttons to appear.
Parts to change here: name_of_img (to match <img name="", below),
Image variable (e.g mouseover_image/normal_image - to match above code),
href element to your documents url and the img name & src. -->

<a href="page.html" onMouseOver="swap('name_of_img','normal_image')"
onMouseOut="swap('name_of_img','mouseover_image')">
<img name="name_of_img" src="path/img.gif" border="0"></a>


From http://www.designplace.org
DoctorBeaver
If all the images are the same, for instance a button menu, CSS might be a good way to go.
simplyw00x
CSS only works on links (A elements) and also you need to manually set widths and heights. Javascript is better in this instance.
DoctorBeaver
My mistake. I made the assumption about links.
Enderwiggin
... Something I used on one of my older webpages...

Code:
<img border="0" src="Pic1link" width="559" height="419" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="Pic2link">


Thats back from when I used frontpage, I think it uses frontpage extensions Razz
opulentdesign
if you use javascript in say dreamweaver if you have access to it, you can get a really nice gui that will allow you just to point and click and add a rollover image very easily.
Stubru Freak
yokonative wrote:
Look. I know your fustration when you need a block of code to help you do things. However, moraly, I just cant give it to you, btu also becuase i'm not sure how you want things done. How you want things labeled and al the fine detial of yout website. you will most liely use java and all it is, it just declaring yout pics as some label and coding the rest in. its really quite simple and i really encourage you to find out how to do it by hand. when you do that, you can cut down on useless code, understand how your site works and have complete control obver things.


Using java would be a really hard way, and not even usefull. An example of java buttons can be seen here:
http://kamariakerke.be
(Buttons on top of page)
As you can see it takes really long to load!

simplyw00x wrote:
CSS only works on links (A elements) and also you need to manually set widths and heights. Javascript is better in this instance.


Not true. Only Internet Explorer can't handle CSS hovers if not links. All other browsers can. Also the new version of Internet Explorer can, I think.

So the right way to go would be using css (for those without javascript), and a IE-only script for those who use Internet Explorer.
Sharkbite86
you could just use css... its not very hard (and i dont even know that much about css)

you can check out what i did with my site if you want... it applies to background pictures mostly but you can put in any pic you want:

http://sharkbite86.byethost32.com/site.css
Related topics
i don't see the change about my domain,Bondings
[java scripts ] Multimedia
help, change pass my acc in cpanel
Help me change port for phptriad
change cpanel login
some cute pic
Tutorials
RATE DA PIC
Change Style !
My Personal Web Site - especially on the Japan trip
how to change the background pic for my floder???
need html code tht will randomly change a pic/text plz help
JS Help Needed...
Change Your Windows 7 Login Screen Pic
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2011 Frihost, forums powered by phpBB.