how can i use javascript this to swap a backgroundimage on mouse over event

Question

It's urgent ,I need answers, reasonable answers ASAP

Answer 1

Assuming your Image html looks something like this:
<img src='/images/image1.jpg'/>

Create a Javascript function to change the image of whatever gets passed through :

function changeimg(image)
{

image.src = 'image2.jpg';

}

Then attach a mouseover event to it so that it calls the function:
<img src='/folder/image1.jpg' onmouseover='changeimg(this)'/>

Now everytime you rollover the image with your mouse, it'll call the function that'll change the image! I would try looking into Jquery. This would be much simpler.

Answer 2

please listen to where I've gone wrong, I used the function method but it still didn't work...
function upDate (previewPic) {
document. get ElementById("theNameOfTheTextToReplace").innerHTML = previewPic. alt;
}
now that's for displaying the images text.
However how can I change the image it's self using a full URL as it's address. please remember that the code I highlighted is a JavaScript base which is called externally to the HTML file

Answer 3

I'm just curious, why use JavaScript and not CSS?

Answer 4

CSS is used quite alright but can I link my JavaScript to my CSS so that the background properties can be used @Zinc
if yes how using the JavaScript code I wrote earlier to create a mouse over effect

Answer 5

then how do you make a mouse over effect with multiple images..!? @ Zinc
please this is what I'm trying to achieve, I want to display an image in a div by mouse overing on three different image tags.
each hover changes the picture shown on the div and when the mouse is hovered away from the image tag, the div should return back to its original image

Answer 6

guys I've figured out the answer to my question
if using the this keyword of a function called inside the HTML tag
; mouse over ="displayPic"/> I.e inside the HTML
then the js code will be
function display (nameOfMyParemeter) {
document.getElementId("nameOfTheTagId").innerHTML = nameOfMyParemeter. alt;
}

Answer 7

Just use pure CSS, no need for any JavaScript. Describe what you want to achieve exactly.

Answer 8

Multiple images on different divs were not mentioned in your earlier post, or maybe I've missed something. I thought it was just one image. I don't have a solution from the top of my head. Maybe jQuery is a solution.