Change background image URL when you scroll over a text link?
up vote
0
down vote
favorite
I'm having trouble with a code. I've tried in different ways and checking other solutions in here to try to change them to my needs but I'm still learning Javascript and I can't find a way to do it.
What I'd like to do is for the image on the left to change when you scroll over the text on the right. For example, if you scroll over "Rules", the little box on the left should change to the checkmark (and of course, the rest should do the same).
The way we did it was by making the images be a background-image inside a div, but we aren't entirely sure if that's the best option. I left there my latest try with an "onmouseover" but it doesn't seem to work.
Thank you for reading.
function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>javascript
edited Nov 11 at 22:19
barbsan
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
add a comment |
up vote
0
down vote
favorite
I'm having trouble with a code. I've tried in different ways and checking other solutions in here to try to change them to my needs but I'm still learning Javascript and I can't find a way to do it.
What I'd like to do is for the image on the left to change when you scroll over the text on the right. For example, if you scroll over "Rules", the little box on the left should change to the checkmark (and of course, the rest should do the same).
The way we did it was by making the images be a background-image inside a div, but we aren't entirely sure if that's the best option. I left there my latest try with an "onmouseover" but it doesn't seem to work.
Thank you for reading.
function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>javascript
edited Nov 11 at 22:19
barbsan
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I'm having trouble with a code. I've tried in different ways and checking other solutions in here to try to change them to my needs but I'm still learning Javascript and I can't find a way to do it.
What I'd like to do is for the image on the left to change when you scroll over the text on the right. For example, if you scroll over "Rules", the little box on the left should change to the checkmark (and of course, the rest should do the same).
The way we did it was by making the images be a background-image inside a div, but we aren't entirely sure if that's the best option. I left there my latest try with an "onmouseover" but it doesn't seem to work.
Thank you for reading.
function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>javascript
edited Nov 11 at 22:19
barbsan
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
I'm having trouble with a code. I've tried in different ways and checking other solutions in here to try to change them to my needs but I'm still learning Javascript and I can't find a way to do it.
What I'd like to do is for the image on the left to change when you scroll over the text on the right. For example, if you scroll over "Rules", the little box on the left should change to the checkmark (and of course, the rest should do the same).
The way we did it was by making the images be a background-image inside a div, but we aren't entirely sure if that's the best option. I left there my latest try with an "onmouseover" but it doesn't seem to work.
Thank you for reading.
function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>function CTHOVER2()
if (getElementById('2').style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
getElementById('2').style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
.caretakergoalsText
color: #b4ac7d;
font-family: Ubuntu;
font-size: 16px;
letter-spacing: -1px;
padding-top: 1px;
.caretakergoalsText:hover
color: #e4d08a;
transition: color 1s;
a
text-decoration: none;
.caretakergoalsImage
background-image: url('https://i.imgur.com/TSoKZYw.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsImage:hover
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
.caretakergoalsImageACTIVE
background-image: url('https://i.imgur.com/zRVjd5a.jpg');
width: 23px;
height: 23px;
float: left;
margin-bottom: 7px;
margin-right: 7px;
.caretakergoalsclear
clear: both;
<a href="https://www.deviantart.com/divinejaws/journal/NEWS-752251501">
<div class="caretakergoalsImageACTIVE"></div>
<div class="caretakergoalsText">News</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/RULES-756241294">
<div class="caretakergoalsImage" id="2"></div>
<div class="caretakergoalsText" onmouseover="CTHOVER2();">Rules</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="https://www.deviantart.com/divinejaws/journal/STORY-753110913">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">About</div>
</a>
<div class="caretakergoalsclear"></div>
<a href="#">
<div class="caretakergoalsImage"></div>
<div class="caretakergoalsText">Events</div>
</a>javascript
javascript
edited Nov 11 at 22:19
barbsan
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
edited Nov 11 at 22:19
barbsan
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
edited Nov 11 at 22:19
barbsan
2,14811122
edited Nov 11 at 22:19
barbsan
2,14811122
edited Nov 11 at 22:19
barbsan
2,14811122
2,14811122
asked Nov 11 at 21:02
Jeffrey Parker
82
asked Nov 11 at 21:02
Jeffrey Parker
82
asked Nov 11 at 21:02
Jeffrey Parker
82
82
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Is this what you wanted to do?
http://jsfiddle.net/ohqtjvuw/8/
Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item =>
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
I put in there smallest changes. I think is one a good way to make hover on brother element but there is plenty of others.
answered Nov 11 at 21:48
Dawid NNNP
1
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253199%2fchange-background-image-url-when-you-scroll-over-a-text-link%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Is this what you wanted to do?
http://jsfiddle.net/ohqtjvuw/8/
Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item =>
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
I put in there smallest changes. I think is one a good way to make hover on brother element but there is plenty of others.
answered Nov 11 at 21:48
Dawid NNNP
1
add a comment |
up vote
0
down vote
Is this what you wanted to do?
http://jsfiddle.net/ohqtjvuw/8/
Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item =>
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
I put in there smallest changes. I think is one a good way to make hover on brother element but there is plenty of others.
answered Nov 11 at 21:48
Dawid NNNP
1
add a comment |
up vote
0
down vote
up vote
0
down vote
Is this what you wanted to do?
http://jsfiddle.net/ohqtjvuw/8/
Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item =>
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
I put in there smallest changes. I think is one a good way to make hover on brother element but there is plenty of others.
answered Nov 11 at 21:48
Dawid NNNP
1
Is this what you wanted to do?
http://jsfiddle.net/ohqtjvuw/8/
Array.from(document.getElementsByClassName('caretakergoalsText')).forEach(item =>
console.log(item.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE"))
item.onmouseenter = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/zRVjd5a.jpg')";
item.onmouseleave = (evt) => evt.target.parentNode.querySelector(".caretakergoalsImage, .caretakergoalsImageACTIVE").style.backgroundImage = "url('https://i.imgur.com/TSoKZYw.jpg')";)
I put in there smallest changes. I think is one a good way to make hover on brother element but there is plenty of others.
answered Nov 11 at 21:48
Dawid NNNP
1
answered Nov 11 at 21:48
Dawid NNNP
1
answered Nov 11 at 21:48
Dawid NNNP
1
answered Nov 11 at 21:48
Dawid NNNP
1
1
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53253199%2fchange-background-image-url-when-you-scroll-over-a-text-link%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
