liampetro Posted August 23 Share Posted August 23 Hey there! So I'm going to try to explain this as best I can. I have this idea to give my website a more interactive feel that involves images appearing upon the mouse hovering over a portion of the home page. If you take a look, the website is currently just a static image as the entirety of the homepage. There are maybe a dozen items in the drawing that is the home page that I'd like visitors to "interact" with just by hovering the mouse over these spaces. For example, upon hovering over the book on the coffee table, the it opens and links to a page of artwork I've done. The small keyboard on the coffee table would lights up and have some keys pressed down, and then links to music I've made. Or even more simply and without links, hovering over the image of the cat causes her to lift her tail up. I'm treating this somewhat like simple animation, where what is currently seen on the site is Frame #1 in my mind. In the example of the book on the coffee table, Frame #2 would be the sketch book laid open with a drawing in it. My question is: how do I do this? I'm determined to make this work but lack the know-how to get this the way I want it. P.S. Maybe this is of importance but I got the idea for the site described above based on a code I used on a previous site of mine where hovering over one image caused another image to appear in the exact same place: <img src="image 1" onmouseover="this.src='image 2'" onmouseout="this.src='image 1'" I tried messing with this thinking it would do the trick but it only made this more difficult and I felt I wasn't headed in the right direction. Thanks and I'd very much love some help! Link to comment
tuanphan Posted August 25 Share Posted August 25 Can you share site url? liampetro 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
liampetro Posted September 2 Author Share Posted September 2 Yes of course! Sorry I'm late with the reply https://www.liampietraszewski.com/ Link to comment
tuanphan Posted September 7 Share Posted September 7 I thought it was multiple images combined into one image. If it's just one image, you can google with the keyword Image Map, there are some free tools that allow you to achieve your requirement. However it will not work well on all screen sizes, when the screen size changes the click area will also change and will no longer be accurate Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment