You are viewing our Forum Archives. To view or take place in current topics click here.
HTML/JavaScri - Change background image on rollover problems
Posted:
HTML/JavaScri - Change background image on rollover problemsPosted:
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
I have a current background for my header section, I am trying to change the background to a different image when the header is moused over.
HTML:
CSS:
JavaScript:
So two problems...
1. Nothing happens with my imgRoll() function; when I mouse over my header, the background image does not change.
2. When I have the imgRoll() function in my script section, the clock I have running no longer works properly.
If you can help me figure out why this is, the help would be greatful.
Also, is there an easier way to make a 'stronger' text-shadow besides just placing multiple shadows on top of each other?
HTML:
CSS:
JavaScript:
So two problems...
1. Nothing happens with my imgRoll() function; when I mouse over my header, the background image does not change.
2. When I have the imgRoll() function in my script section, the clock I have running no longer works properly.
If you can help me figure out why this is, the help would be greatful.
Also, is there an easier way to make a 'stronger' text-shadow besides just placing multiple shadows on top of each other?
#2. Posted:
Status: Offline
Joined: Aug 20, 201410Year Member
Posts: 6,813
Reputation Power: 413
Status: Offline
Joined: Aug 20, 201410Year Member
Posts: 6,813
Reputation Power: 413
I would try using the :hover function in CSS, depends if it does what you need in terms of return to the regular image when the cursor leaves the header.
Sorry if this isn't what you're looking for, my HTML is a bit rusty.
#header:hover {
//whatever you want to happen.
} Sorry if this isn't what you're looking for, my HTML is a bit rusty.
- 1useful
- 1not useful
#3. Posted:
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
_Skittle wrote I would try using the :hover function in CSS, depends if it does what you need in terms of return to the regular image when the cursor leaves the header.
#header:hover {
//whatever you want to happen.
}
Sorry if this isn't what you're looking for, my HTML is a bit rusty.
Yeah, thanks for the suggestion but the background change is just one part of my task. I have to use the onmouseover functions as part of the mark scheme anyway.
- 0useful
- 0not useful
#4. Posted:
Status: Offline
Joined: Aug 20, 201410Year Member
Posts: 6,813
Reputation Power: 413
Status: Offline
Joined: Aug 20, 201410Year Member
Posts: 6,813
Reputation Power: 413
-Deano wrote_Skittle wrote I would try using the :hover function in CSS, depends if it does what you need in terms of return to the regular image when the cursor leaves the header.
#header:hover {
//whatever you want to happen.
}
Sorry if this isn't what you're looking for, my HTML is a bit rusty.
Yeah, thanks for the suggestion but the background change is just one part of my task. I have to use the onmouseover functions as part of the mark scheme anyway.
Ah ok. I would do a bit of self-debugging, put an alert(); into different points of the JS and see if they are indeed being triggered. Best of luck ;)
- 0useful
- 1not useful
#5. Posted:
Status: Offline
Joined: Jun 11, 200915Year Member
Posts: 9,897
Reputation Power: 3160
Motto: "I'l no I grew up to fast speed I no u will be little famous" - Famous_Energy
Motto: "I'l no I grew up to fast speed I no u will be little famous" - Famous_Energy
Status: Offline
Joined: Jun 11, 200915Year Member
Posts: 9,897
Reputation Power: 3160
Motto: "I'l no I grew up to fast speed I no u will be little famous" - Famous_Energy
Your issue (at least part of it) is in your imgRoll function.
Think of it like this.
The above code doesn't make 5 = 10, it just reassigns the value of someInt to be 10. So the same is true for your code.
Inside of your if block, you're going to want something along the lines of:
Obscure may have a better solution for this, I know he's a web dev.
currentBackground = whatever; Think of it like this.
var someInt = 5;
someInt = 10; The above code doesn't make 5 = 10, it just reassigns the value of someInt to be 10. So the same is true for your code.
Inside of your if block, you're going to want something along the lines of:
document.getElementById('header').style.backgroundImage = 'url(url here)'; Obscure may have a better solution for this, I know he's a web dev.
- 1useful
- 0not useful
#6. Posted:
Status: Offline
Joined: Jun 23, 201311Year Member
Posts: 2,308
Reputation Power: 228
Status: Offline
Joined: Jun 23, 201311Year Member
Posts: 2,308
Reputation Power: 228
Oh, this is really simple man.
CSS
#header {
background-image: url('image1.png');
height: 70px;
width: 120px;
}
#header:hover {
background-image: url('image2.png');
width: [IMAGE_WIDTH_IN_PIXELS]px;
height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
HTML
<div id="header"></div>
There's really no javascript needed..
CSS
#header {
background-image: url('image1.png');
height: 70px;
width: 120px;
}
#header:hover {
background-image: url('image2.png');
width: [IMAGE_WIDTH_IN_PIXELS]px;
height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
HTML
<div id="header"></div>
There's really no javascript needed..
- 0useful
- 0not useful
#7. Posted:
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
ZZ9_x_iNepalZz wrote Oh, this is really simple man.
CSS
#header {
background-image: url('image1.png');
height: 70px;
width: 120px;
}
#header:hover {
background-image: url('image2.png');
width: [IMAGE_WIDTH_IN_PIXELS]px;
height: [IMAGE_HEIGHT_IN_PIXELS]px;
}
HTML
<div id="Library"></div>
There's really no javascript needed..
Nah, that was the same point I made to Skittle. I know I can use :hover but I have to implement some simple javascript element so figured I would do something with the header as it should've been pretty simple.
- 0useful
- 0not useful
#8. Posted:
Status: Offline
Joined: Jun 23, 201311Year Member
Posts: 2,308
Reputation Power: 228
Status: Offline
Joined: Jun 23, 201311Year Member
Posts: 2,308
Reputation Power: 228
Why do you have to insert a simple javascript snippet for something that doesn't require it?
- 0useful
- 0not useful
#9. Posted:
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
Status: Offline
Joined: Aug 19, 201014Year Member
Posts: 5,243
Reputation Power: 532
ZZ9_x_iNepalZz wrote Why do you have to insert a simple javascript snippet for something that doesn't require it?
It was just something I chose to do. I could've done a number of different things to show the use of javascript but a changing header image was just the one I picked.
I'm also doing a floating menu bar, as seen by my other topic.
The work is meant to be a showcase that we can do something, not whether it is the easiest/simplest way to do it.
- 0useful
- 0not useful
#10. Posted:
Status: Offline
Joined: Jan 22, 20168Year Member
Posts: 3
Reputation Power: 0
Hey dude,
A solution could be to have two images, one hidden (display:none)
and on visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block.
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
} A solution could be to have two images, one hidden (display:none)
and on visible. On the hover over a surrounding span, the original image changes to display:none and the other image to display:block.
- 1useful
- 0not useful
You are viewing our Forum Archives. To view or take place in current topics click here.