ReactJS - changing image onMouseOver does not work
My goal is to create a stateless image button component that changes images when I hover over it and that I can later use in other places.
My current problem is that I can't set the "hover" image when the onMouseOver event is called. The image is not being displayed and it looks like this:
// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = { imageSelected };
}
function out(e) {
e.currentTarget.src = { image };
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
When I don't hover over the component the image is displayed correctly. What am I doing wrong or how can I improve the code to reach my goal?
Also what I don't want is to have the paths to the images hardcoded in e.g CSS. The best thing would be to set the images via props I guess.
javascript reactjs onmouseover
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
add a comment |
My goal is to create a stateless image button component that changes images when I hover over it and that I can later use in other places.
My current problem is that I can't set the "hover" image when the onMouseOver event is called. The image is not being displayed and it looks like this:
// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = { imageSelected };
}
function out(e) {
e.currentTarget.src = { image };
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
When I don't hover over the component the image is displayed correctly. What am I doing wrong or how can I improve the code to reach my goal?
Also what I don't want is to have the paths to the images hardcoded in e.g CSS. The best thing would be to set the images via props I guess.
javascript reactjs onmouseover
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
add a comment |
My goal is to create a stateless image button component that changes images when I hover over it and that I can later use in other places.
My current problem is that I can't set the "hover" image when the onMouseOver event is called. The image is not being displayed and it looks like this:
// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = { imageSelected };
}
function out(e) {
e.currentTarget.src = { image };
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
When I don't hover over the component the image is displayed correctly. What am I doing wrong or how can I improve the code to reach my goal?
Also what I don't want is to have the paths to the images hardcoded in e.g CSS. The best thing would be to set the images via props I guess.
javascript reactjs onmouseover
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
My goal is to create a stateless image button component that changes images when I hover over it and that I can later use in other places.
My current problem is that I can't set the "hover" image when the onMouseOver event is called. The image is not being displayed and it looks like this:
// Assets
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = { imageSelected };
}
function out(e) {
e.currentTarget.src = { image };
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
When I don't hover over the component the image is displayed correctly. What am I doing wrong or how can I improve the code to reach my goal?
Also what I don't want is to have the paths to the images hardcoded in e.g CSS. The best thing would be to set the images via props I guess.
javascript reactjs onmouseover
javascript reactjs onmouseover
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
asked Dec 30 '18 at 14:47
L3M0LL3M0L
72214
72214
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Just Remove {} around imageSelected and image, when you insert {} around these actually you pass object, not your image.
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = imageSelected ;
}
function out(e) {
e.currentTarget.src = image ;
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
for your second question you can pass images as props and show them like this :
const HoverImage = props => {
function over(e) {
e.currentTarget.src = props.hoverImage;
}
function out(e) {
e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};
you can check this Sandboox for more information;
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would useonMouseEnter&onMouseLeaveas it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.
– AWolf
Dec 30 '18 at 15:55
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',
autoActivateHeartbeat: false,
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%2f53978587%2freactjs-changing-image-onmouseover-does-not-work%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
Just Remove {} around imageSelected and image, when you insert {} around these actually you pass object, not your image.
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = imageSelected ;
}
function out(e) {
e.currentTarget.src = image ;
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
for your second question you can pass images as props and show them like this :
const HoverImage = props => {
function over(e) {
e.currentTarget.src = props.hoverImage;
}
function out(e) {
e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};
you can check this Sandboox for more information;
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would useonMouseEnter&onMouseLeaveas it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.
– AWolf
Dec 30 '18 at 15:55
add a comment |
Just Remove {} around imageSelected and image, when you insert {} around these actually you pass object, not your image.
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = imageSelected ;
}
function out(e) {
e.currentTarget.src = image ;
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
for your second question you can pass images as props and show them like this :
const HoverImage = props => {
function over(e) {
e.currentTarget.src = props.hoverImage;
}
function out(e) {
e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};
you can check this Sandboox for more information;
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would useonMouseEnter&onMouseLeaveas it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.
– AWolf
Dec 30 '18 at 15:55
add a comment |
Just Remove {} around imageSelected and image, when you insert {} around these actually you pass object, not your image.
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = imageSelected ;
}
function out(e) {
e.currentTarget.src = image ;
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
for your second question you can pass images as props and show them like this :
const HoverImage = props => {
function over(e) {
e.currentTarget.src = props.hoverImage;
}
function out(e) {
e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};
you can check this Sandboox for more information;
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
Just Remove {} around imageSelected and image, when you insert {} around these actually you pass object, not your image.
import image from '../assets/normal.png';
import imageSelected from '../assets/selected.png';
const HoverImage = () => {
function over(e) {
e.currentTarget.src = imageSelected ;
}
function out(e) {
e.currentTarget.src = image ;
}
return <img src={image} onMouseOver={over} onMouseOut={out} />;
};
export default HoverImage;
for your second question you can pass images as props and show them like this :
const HoverImage = props => {
function over(e) {
e.currentTarget.src = props.hoverImage;
}
function out(e) {
e.currentTarget.src = props.normalImage;
}
return <img src={props.normalImage} onMouseOver={over} onMouseOut={out} />;
};
you can check this Sandboox for more information;
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
edited Dec 30 '18 at 15:02
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
answered Dec 30 '18 at 14:55
MBehtemamMBehtemam
2,86084484
2,86084484
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would useonMouseEnter&onMouseLeaveas it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.
– AWolf
Dec 30 '18 at 15:55
add a comment |
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would useonMouseEnter&onMouseLeaveas it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.
– AWolf
Dec 30 '18 at 15:55
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
Thats it! It works as it should. Thank You a lot!
– L3M0L
Dec 30 '18 at 15:42
I'd like to leave my demo here as well. I would use
onMouseEnter & onMouseLeave as it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.– AWolf
Dec 30 '18 at 15:55
I'd like to leave my demo here as well. I would use
onMouseEnter & onMouseLeave as it makes toggling easier. codesandbox.io/s/63mv86l1w And in this SO question there are more ideas how you could implement the hovering.– AWolf
Dec 30 '18 at 15:55
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.
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%2f53978587%2freactjs-changing-image-onmouseover-does-not-work%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
