{"id":30150,"date":"2023-01-13T13:10:11","date_gmt":"2023-01-13T07:40:11","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/"},"modified":"2023-01-13T13:10:11","modified_gmt":"2023-01-13T07:40:11","slug":"solved-change-img-src-on-hover","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/","title":{"rendered":"[Solved] Change img src on hover"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

[1] How can I change img src<\/em> when it’s on hover<\/strong>
\nYou can’t do this with CSS alone, as src<\/strong><\/em> is a DOM attribute<\/strong> not a CSS attribute<\/strong>, to accomplish this some javascript is required with HTML DOM Event system<\/p>\n

<body>\n<div>\n  <img onmouseenter=\"highlight(this)\" onmouseleave=\"unhighlight(this)\" \n       src=\"thumbnail1\">\n  <a href=\"#potato\" class=\"hoverable-link\">Some Link<\/a>\n<\/div>\n<script>\n  function highlight(image) {\n    image.src = \"thumbnail2\"; \/\/Blue Image\n  }\n  function unhighlight(image) {\n    image.src = \"thumbnail1\"; \/\/Gray Image\n  }\n<\/script>\n<\/body>\n<\/code><\/pre>\n
JsFiddle: https:\/\/jsfiddle.net\/f0c7p3tL\/2\/<\/a>
\nList of DOM Events: http:\/\/www.w3schools.com\/jsref\/dom_obj_event.asp<\/a><\/p>\n
Another approach is to not using the src<\/em> DOM attribute<\/strong> at all. Instead you can use the background<\/em> CSS attribute<\/strong>, that way you can utilize the CSS:hover<\/strong> selector
\nCSS:<\/p>\n
#my-thumbnail {\n  background: url(\"\/thumbnail1\") no-repeat;\n  width: 32px;\n  height: 32px;\n}\n#my-thumbnail:hover {\n  background: url(\"\/thumbnail2\") no-repeat;\n}\n<\/code><\/pre>\n
HTML:<\/p>\n
<div>\n  <img id=\"my-thumbnail\">\n  <a href=\"#potato\" class=\"hoverable-link\">Some Link<\/a>\n<\/div>\n<\/code><\/pre>\n
JsFiddle: https:\/\/jsfiddle.net\/7xoprwky\/<\/a><\/p>\n
[2] How can I trigger hover-event for both element at the same time<\/strong>
\nAgain, two approaches are available here.<\/p>\n
First is using javascript and the HTML DOM Events. In this approach, instead of triggering events on either of the child elements, we want them to be triggered on the surrounding <div><\/code> parent element. Then, in the event handler, we select the child elements and change their DOM Attribute<\/strong> accordingly<\/p>\n
<body>\n<div onmouseenter=\"highlight(this)\" onmouseleave=\"unhighlight(this)\">\n  <img id=\"my-thumbnail\" src=\"thumbnail1\">\n  <a   id=\"my-anchor\" href=\"#potato\">Some Link<\/a>\n<\/div>\n<script>\n  var myThumbnail = document.getElementById('my-thumbnail'),\n      myAnchor = document.getElementById('my-anchor');\n\n  function highlight() {\n    myThumbnail.src = \"\/thumbnail2\";\n    myAnchor.style.color = \"blue\";\n    myAnchor.style.fontWeight = \"bold\";\n  }\n\n  function unhighlight() {\n    myThumbnail.src = \"\/thumbnail1\";\n    myAnchor.style.color = \"gray\";\n    myAnchor.style.fontWeight = \"normal\";\n  }\n<\/script>\n<\/body>\n<\/code><\/pre>\n
JsFiddle: https:\/\/jsfiddle.net\/2uthconL\/<\/a><\/p>\n
In the second approach we utilize the CSS selector syntax to highlight our internal element from our surrounding div<\/p>\n
CSS:<\/p>\n
#my-thumbnail-link {\n}\n#my-thumbnail-link img { \/* Select all img tag inside div *\/\n    background: url(\"\/thumbnail1\") no-repeat;\n    width: 32px;\n    height: 32px;\n}\n#my-thumbnail-link:hover img { \/* Select all img tag inside div when it is hovered *\/\n    background: url(\"\/thumbnail2\") no-repeat;\n}\n#my-thumbnail-link a { \/* Select all a tag inside div *\/\n    color: gray;\n}\n#my-thumbnail-link:hover a { \/* Select all a tag inside div when it is hovered *\/\n    color: blue;\n    font-weight: bold;\n}\n<\/code><\/pre>\n
HTML:<\/p>\n
<div id=\"my-thumbnail-link\" class=\"vcenter-parent\">\n  <img class=\"vcenter-child\">\n  <a href=\"#potato\" class=\"vcenter-child\">Some Link<\/a>\n<\/div>\n<\/code><\/pre>\n
JsFiddle: https:\/\/jsfiddle.net\/x61dy0mk\/2\/<\/a>
\nMore on CSS Selector: http:\/\/www.w3schools.com\/cssref\/css_selectors.asp<\/a><\/p>\n
If your thumbnail is just a static asset, I recommend the CSS approach over the Javascript HTML DOM one for its readability and maintainability (imagine keeping thousands of event handlers)<\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            <\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved Change img src on hover <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] [1] How can I change img src when it’s on hover You can’t do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system <body> <div> <img onmouseenter=”highlight(this)” onmouseleave=”unhighlight(this)” src=”thumbnail1″> <a href=”#potato” class=”hoverable-link”>Some Link<\/a> <\/div> <script> function highlight(image) … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[464,346],"class_list":["post-30150","post","type-post","status-publish","format-standard","hentry","category-solved","tag-css","tag-html"],"yoast_head":"\n[Solved] Change img src on hover - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Change img src on hover - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] [1] How can I change img src when it’s on hover You can’t do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system <body> <div> <img onmouseenter="highlight(this)" onmouseleave="unhighlight(this)" src="thumbnail1"> <a href="#potato" class="hoverable-link">Some Link<\/a> <\/div> <script> function highlight(image) ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-01-13T07:40:11+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Change img src on hover\",\"datePublished\":\"2023-01-13T07:40:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\"},\"wordCount\":256,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"css\",\"html\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\",\"name\":\"[Solved] Change img src on hover - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2023-01-13T07:40:11+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Change img src on hover\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Change img src on hover - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Change img src on hover - JassWeb","og_description":"[ad_1] [1] How can I change img src when it’s on hover You can’t do this with CSS alone, as src is a DOM attribute not a CSS attribute, to accomplish this some javascript is required with HTML DOM Event system <body> <div> <img onmouseenter=\"highlight(this)\" onmouseleave=\"unhighlight(this)\" src=\"thumbnail1\"> <a href=\"#potato\" class=\"hoverable-link\">Some Link<\/a> <\/div> <script> function highlight(image) ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/","og_site_name":"JassWeb","article_published_time":"2023-01-13T07:40:11+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Change img src on hover","datePublished":"2023-01-13T07:40:11+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/"},"wordCount":256,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["css","html"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/","url":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/","name":"[Solved] Change img src on hover - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2023-01-13T07:40:11+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-change-img-src-on-hover\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Change img src on hover"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=30150"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/30150\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=30150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=30150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=30150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}