Hover over image and a new image...

User 54342 Photo


Registered User
58 posts

I have been away for a long time! A friend wants a web site in which you can hover over an image and another image pops up. for example, a blueprint of a house, you hover over the living room and then an image of the living room pops up and then another frame opens describing the rooms dimensions etcetera... does the HTML editor accomplish this?
User 122279 Photo


Senior Advisor
14,541 posts

The HTML Editor can do anything you want as long as you have the right code.

In your case, check out the modal I have in my sharing repository: https://mock-up.coffeecup.com/html-comps/modal.html
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 379556 Photo


Registered User
1,558 posts

https://www.w3schools.com/htmL/html_images_imagemap.asp shows how to make an image map.

I attach a simple modification of it to show how one might make it select on hover the appropriate images and text.

Frank
Attachments:
User 54342 Photo


Registered User
58 posts

Thanks for your replies! I may need to be more precise, I want to hover over a house blue print, and when I do so the image of the room appears above it, then another box can open to the side that will give its dimension and maybe a link to a 360 degree video. This has to be all on the same page.
User 2699991 Photo


Registered User
5,068 posts
Online Now

So have you not tried Ingers way with a modal popup. (see her reply above)

The HTML Editor can do anything you want as long as you have the right code

In your case, check out the modal I have in my sharing repository: https://mock-up.coffeecup.com/html-comps/modal.html


Yes it has to be clicked or tapped rather than hover, but have you (or your client) considered the users, (also potential clients) who cannot use a mouse to hover :- mobile devices, people who cannot use aa mouse for whatever reason, so use either a keyboard (tab/enter) or touch screen users, it's called Website Accessibility For All and is an important metric in search engine core vital thingies they now use to help with search engine results.

With a little bit of additional code (CSS animation) the modal can appear and dissapear in many different way, timings etc, overall a pretty useful thing is a modal.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 187934 Photo


Senior Advisor
20,239 posts

Do you have Coffeecups Image mapper?
Here's an example of colorbox being used.
http://progrowerhtml.coffeecup.com/imagemapper/popup/

Here's another example. Popup inside a popup.
http://progrowerhtml.coffeecup.com/imag … xtpop.html
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2413940 Photo


Registered User
34 posts

On mouse over, the image will appear without having to click:
https://codepen.io/wall-e/pen/zvvgBe
Gary Chike
"Experience is what you get, when you don't get what you want."
User 2699991 Photo


Registered User
5,068 posts
Online Now

Gary Chike wrote:
On mouse over, the image will appear without having to click:
https://codepen.io/wall-e/pen/zvvgBe

so how about devices that can't do hover? Mobile devices / touch screen
or
users that can't use a mouse? (ie disabled have to use keyboard actions or a wand) Websites for all not just the able bodied
Dan, the original poster wants different parts of the image to have different images appear, not just the one image replaced by another image.
If I follow the link https://codepen.io/wall-e/pen/zvvgBe I just get blank page
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 122279 Photo


Senior Advisor
14,541 posts

But if you take the HTML and CSS displayed in code pen and pop them into a code editor, you will get an image that displays a larger version when hovered over. I haven't tested it on my phone, but the problem will possibly be the one you are describing above.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.