I have been tinkering with image gallery's and draggable icons, I would like to change the background image to the image on the thumb when it is double clicked. how to do that? I rewrote this html to work in stack's compiler using images from DeviantArt, the URLs are long and gibberish, otherwise the HTML,CSS are pretty straight forward. I tried a few methods of adding backgrounds to <HTML>, <DIV> and <BODY> tags and I have tried using a pure html approach using the onclick attribute directly on the <image> tags.
<link charset="UTF-8">
<style>
body {
background-image: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6d2bd846-3511-48fd-ae5b-8d3b0a644f43/d38k6a9-b1ae0241-cb89-4271-bdc5-d651c2bedc67.png/v1/fill/w_450,h_250,q_80,strp/ryu_streetfighter_v2_by_shad0wfall_d38k6a9-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjUwIiwicGF0aCI6IlwvZlwvNmQyYmQ4NDYtMzUxMS00OGZkLWFlNWItOGQzYjBhNjQ0ZjQzXC9kMzhrNmE5LWIxYWUwMjQxLWNiODktNDI3MS1iZGM1LWQ2NTFjMmJlZGM2Ny5wbmciLCJ3aWR0aCI6Ijw9NDUwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.Tmrhile8PClUVQ9xV-QNycX2WaAEdveHAZLw-VMN-Eg');
background-size: cover;
background-repeat: no-repeat;
z-index:-1;
user-select:none;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
}
.nohigh {
position:absolute;
left:40%;
top:40%;
}
#mydiv {
height:100;
width:200;
-webkit-box-shadow:4px 4px rgba(0,0,0,.8);
-webkit-border-radius:10%;
border:1px solid black;
}
image {
height:*;
width:*;
}
#mydiv:hover {
scale:1.2;
border:1px solid black;
cursor:move;
cursor:grab;
cursor:-moz-grab;
cursor:-webkit-grab;
}
#mydivheader {
cursor:move;
color:#fff;
}
</style>
<body>
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/99fd58bb-e6ab-4252-a818-dd862610a961/da6mwno-08329547-6321-4262-b7f1-2efbb92016d5.jpg/v1/fill/w_1475,h_542,q_70,strp/fighting_game_powerhouse_tribute_by_themikko_da6mwno-pre.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTg4IiwicGF0aCI6IlwvZlwvOTlmZDU4YmItZTZhYi00MjUyLWE4MTgtZGQ4NjI2MTBhOTYxXC9kYTZtd25vLTA4MzI5NTQ3LTYzMjEtNDI2Mi1iN2YxLTJlZmJiOTIwMTZkNS5qcGciLCJ3aWR0aCI6Ijw9MTYwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.sqM9XMpBInM4B2tXQ9l861njq3SG6wWZLfTpWUwZ_ww">
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/700fc7af-b991-4fd5-b7b8-ce3cb9a3f733/dd4xdus-eb3fc6d0-f2b2-48eb-a8cf-ac91acd16a04.jpg/v1/fill/w_525,h_350,q_70,strp/street_fighter__i_got_next_by_jeffach_dd4xdus-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9OTMzIiwicGF0aCI6IlwvZlwvNzAwZmM3YWYtYjk5MS00ZmQ1LWI3YjgtY2UzY2I5YTNmNzMzXC9kZDR4ZHVzLWViM2ZjNmQwLWYyYjItNDhlYi1hOGNmLWFjOTFhY2QxNmEwNC5qcGciLCJ3aWR0aCI6Ijw9MTQwMCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.oqEUN4v88WH5RIuWYK8pEfWb4k0tfSzNVqdwe80cLz0">
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/04450d3b-c999-48a7-a4a4-51ed18e3b01b/d664093-56d95fe4-d8b1-4a55-aa44-96de312cbab4.jpg/v1/fill/w_600,h_212,q_75,strp/street_fighter_sig__chun_li_and_cammy_by_bebekimichi_d664093-fullview.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjEyIiwicGF0aCI6IlwvZlwvMDQ0NTBkM2ItYzk5OS00OGE3LWE0YTQtNTFlZDE4ZTNiMDFiXC9kNjY0MDkzLTU2ZDk1ZmU0LWQ4YjEtNGE1NS1hYTQ0LTk2ZGUzMTJjYmFiNC5qcGciLCJ3aWR0aCI6Ijw9NjAwIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmltYWdlLm9wZXJhdGlvbnMiXX0.INYOtFBIZa47UOimAyrfHmP5U58T5MeulEAFbAqQqlI">
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9a6e1df4-2581-4aff-9e0e-1f67d8981f84/d5mos1w-6b2b0f7b-b24b-4723-bbd7-daeec47c26cf.jpg/v1/fill/w_623,h_350,q_70,strp/street_fighter_x_king_of_fighters_wallpaper_ver_a__by_the_red_jack03_d5mos1w-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzY4IiwicGF0aCI6IlwvZlwvOWE2ZTFkZjQtMjU4MS00YWZmLTllMGUtMWY2N2Q4OTgxZjg0XC9kNW1vczF3LTZiMmIwZjdiLWIyNGItNDcyMy1iYmQ3LWRhZWVjNDdjMjZjZi5qcGciLCJ3aWR0aCI6Ijw9MTM2NiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.eqN8ehHe1dp6m6thBqbdQ-lz9SKI7JAMfxnXLx8ozlo">
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/95ae03fd-2eb2-4f85-a5d3-a3446ff4c71a/dcgjcui-fe61a22c-254c-48f6-8db1-4aa6cd76d013.jpg/v1/fill/w_444,h_250,q_70,strp/ibuki_vs__valentine_by_omnicidalclown1992_dcgjcui-250t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NTc3IiwicGF0aCI6IlwvZlwvOTVhZTAzZmQtMmViMi00Zjg1LWE1ZDMtYTM0NDZmZjRjNzFhXC9kY2dqY3VpLWZlNjFhMjJjLTI1NGMtNDhmNi04ZGIxLTRhYTZjZDc2ZDAxMy5qcGciLCJ3aWR0aCI6Ijw9MTAyNCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19._k0CKXukppf95qAqn1pR5qrryIhP7donb0rhDPrZd84">
<image id="mydiv" class="nohigh" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/a9207c92-cc1a-41d2-86fe-f37407751cd9/dfktomv-e44a48ad-b6ae-4c0b-abdf-d1239481232b.png/v1/fill/w_622,h_350,q_70,strp/cammy_white_chun_li_street_fighter_by_yuiofire_by_ayrton31_dfktomv-350t.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9NzIxIiwicGF0aCI6IlwvZlwvYTkyMDdjOTItY2MxYS00MWQyLTg2ZmUtZjM3NDA3NzUxY2Q5XC9kZmt0b212LWU0NGE0OGFkLWI2YWUtNGMwYi1hYmRmLWQxMjM5NDgxMjMyYi5wbmciLCJ3aWR0aCI6Ijw9MTI4MCJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.-h4kHCMFvoZjPI9SJ48qA8fg-aT23_YmmOtdZimY9PE">
</body>
<script>
<!-- Darg Icons to a Location -->
document.addEventListener("mousedown",mouseDown);
function mouseDown(info) {
var elmnt
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (info.target.id == "mydiv") {
elmnt = info.target
dragMouseDown()
}
function dragMouseDown(e) {
console.log(e)
e = e || window.event;
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>