Novahq.net Forum - Picture Change

Novahq.net Forum (https://novahq.net/forum/index.php)

- Web design and Programming (https://novahq.net/forum/forumdisplay.php?f=32)

- - Picture Change (https://novahq.net/forum/showthread.php?t=32703)

Hi I need a JavaScipt code that must work! This is the following.

When someone see the image when mouse is over it, the image changes. When not changes back to an orginal.

Please Thanks! :D

I'm pretty sure you can do this with CSS using back ground images. I'll read more on it, and hopefuly later I can display a lil code snippet for you to use. JS will mean less can see the rollover. (not a lot less, but still less.)

Okay, seeings how I assume this is a image link let's get down to buisness

the CSS code:

Code:

a {

  background: url("http://image.com/image/image.jpg");

  /*then the rest of course*/

} 

a:hover {

  background: url("http://image.com/image/otherimage.jpg");

}

Then of course

Code:

<a href="index.php">Home</a>

Now this is untested, and can't be used in certain cases. But this can easily be modified to work to your needs :) This is meant to get you on a start. For more indepth look at all this I'd recommend www.w3schools.com :D :D

I think CSS is bad. So I want it to be actionscipt.

Not meaning to be rude in any way, but why on earth do you think CSS is bad? Do you mean for this particular situation?

No no, I like CSS. I use it only for text effects. Nevermind I wrote my own code. Thanks anyway!

:gj: I was about to try to dig up a JS code snippet for ya, but you wrote your own code. gj.

I use the following code which requires no preloading and works like a charm.
For future reference this is the javascript you need:

1) Put this in the head

Code:

<script language="JavaScript" type="text/javascript" src="PATH/FILENAME.js"></script>

2) Change the image paths below to your liking and then paste it in notepad and save as .JS
(Make sure you set the filename in the first code)

Code:

if (document.images) { 

image1on = new Image(); 

image1on.src = "images/page1-over.gif"; 

image1off = new Image(); 

image1off.src = "images/page1.gif";  



image2on = new Image(); 

image2on.src = "images/page2-over.gif"; 

image2off = new Image(); 

image2off.src = "images/page2.gif";



}  

function changeimages() { 

if (document.images) { 

for (var i=0; i<changeimages.arguments.length; i+=2) { 

document[changeimages.arguments[i]].src = eval(changeimages.arguments[i+1] + ".src"); 

} 

} 

}

3) Now put the following code infront of the image you want to change:

Code:

<a href="index.php" target="_parent" onmouseover="changeimages('image2', 'image2on')" onmouseout="changeimages('image2', 'image2off')">

Now insert the following code inside the image tag (the one that will be changing):

Code:

name="image1"

4) Repeat step 3 for each image, changing the numbers each time. Make sure each image is in the .js aswell.

There you go :D

Oh mines much shorter!

Did you write it, or someone else? (@ webviper)

Well, yours may be shorter but i guarentee mine looks neater within the code ;).

Quote:

Originally posted by Jeff
Well, yours may be shorter but i guarentee mine looks neater within the code ;).

Neatness is top priority, I'd use Jeffs. Besides, a few lines for whatever you are doing probaly won't make a diff.

Quote:

Originally posted by -Elite-
Did you write it, or someone else? (@ webviper)

I wrote it here it is

Code:

<script type="text/javascript">



function init() {

  if (!document.getElementById) return

  var imgOriginSrc;

  var imgTemp = new Array();

  var imgarr = document.getElementsByTagName('img');

  for (var i = 0; i < imgarr.length; i++) {

    if (imgarr[i].getAttribute('hsrc')) {

        imgTemp[i] = new Image();

        imgTemp[i].src = imgarr[i].getAttribute('hsrc');

        imgarr[i].onmouseover = function() {

            imgOriginSrc = this.getAttribute('src');

                                                var imagetest=new Image()

                                                imagetest.src=this.getAttribute('hsrc')

                                                if (imagetest.complete)

            this.setAttribute('src',this.getAttribute('hsrc'))

        }

        imgarr[i].onmouseout = function() {

                                                var imagetest=new Image()

                                                imagetest.src=imgOriginSrc

                                                if (imagetest.complete)

            this.setAttribute('src',imgOriginSrc)

        }

    }

  }

}

onload=init;



</script>

And then when I make an image...

<img src="images/menu_buttons/forums_0.gif" width="170" height="19" border="0" hsrc="images/menu_buttons/forums_1.gif">