Display Image on Hover Event for a Floor plan (Image)

[DarrenDWilde]

Hi everyone,

Firstly please forgive me if any of what I am asking has been answered before.  I have looked and read on this Forum but I am totally new and just beginning HTML, CSS and Javascript and I am not particularly familiar with Dreamweaver's tools especially designing conventions.  Most of the web design and programming "micro-knowledge" I do have came from W3 Schools.com.

---

Problem

As a Real Estate broker, I wanted to be able to use hot spots in an image where the user\visitor can hover over a section of a floor plan (kitchen for example) and have relevant pictures\ text information appear over that area then disappear when the user moves the cursor away or hovers over another area of the floor plan.  The intention is to provide users with a truly interactive experience and a "cool" buzz.

---

Secondary Problem - Lack of Experience

I have a VERY basic and limited idea of using HTML\CSS and the hover event but am not sure where to go \ What to do next.

So Far;

• I have created a basic document in Dreamweaver.
• Inserted the Image (Main Floor Plan)
• Used the Property Inspector to draw a zone around the kitchen on the plan.
• I linked to a separate HTM file of an image of the kitchen.
• When I click the zone in Live View nothing happens.

While I was searching around I noticed a Dreamweaver MVP mentioned that image maps are old school and non-responsive and that most designers use Photoshop to slice an image but that seems to have added more confusion.

Is there an easy way to do this without having to be an engineer?

Please let me know if\how I can clarify what I am looking to achieve.

[Jon Fritz]

Being unfamiliar with HTML, CSS and Javascript is worse than being unfamiliar with DW in this situation because what you want to do isn't built into the program and would require you to either write all the code, or be able to add an existing third party script to your page to move forward.

You appear to have found some good, and some very bad info on image maps. It is true, they are not responsive by nature and require javascript to make a browser resize them as an image is resized. However, Photoshop slices would not be something that would work well for this. PS puts sliced images into extremely rigid tables that are the opposite of responsive and break at the drop of a hat.

What I would do in this situation (not being able to really hand-code, but having the desire to create a relatively complex page) is look for a "responsive jquery image map with tooltip" script in Google. Most come with relatively simple instructions on how to add them to an existing page, but only you are going to be able to determine if you know enough about html structure to add them to your site with the various levels of instruction available.

[DarrenDWilde]

Jon thanks so much for the time to reply.

Although I am not familiar with web design language I am very determined to learn and have played about a fair bit, but it seems that something that presents itself as a trivial and cool idea becomes grossly complex when in front of the screen especially based on your reply and lets face it, your light years ahead of me and you seem sheepish about the approach. I hadn't for example considered JQuery to address browser resizing. Ugh.

I think this idea may get shelved as it appears too complicated and may consume too much production time. On the other hand the challenge seems quite tempting.  I will definitely keep you updated if I find a way,

With sincere regards,

Darren

[Nancy OShea]

Increasingly, people use tablets more than desktops & laptops now.  CSS hover/mouseover  events are useless on touch screen devices because there is no mouse.  A bad user experience for any segment of your audience is not a workable solution.  These days, we must cater to all users on various devices.

Keep things simple and user-friendly for everyone.  

OnClick event triggers will work on all devices.  You might want to rethink your image map idea and opt for a slideshow with a modal window viewer that people can swipe/scroll through.

Below is a basic image gallery made with Bootstrap's Modal Window and Carousel components.  No custom coding required. 

Bootstrap Modal + Carousel Gallery - http://alt-web.com/

[DarrenDWilde]

Nancy,

Thank you so much for your insight, I am starting to see why this floor plan idea hasn't been done that I know of plus, with the advances in technology such as Matterport-3D tours I guess my idea just caught up from the 90's and would be grossly antiquated making the project expensive in many ways.

It was actually your profile I learnt about slicing images in PS and how zones are outdated\Unresponsive and I will go back and update that post to credit it.

I appreciate your insight to simplicity and guiding me around unnecessary and complex code which I wont be able to effectively understand let alone write.  It took me a week to understand how CSS complemented HTML and how I could apply it to the ideas that I wanted to get out.  I have books and a dedicated mind and online resources such as this one so it should be interesting. I actually subscribed to CC just for InDesign which is where I create brochures. I wanted to create a site based on the design as a theme...Nobody in my market can produce these which is awesome and gives us an edge.  If I can translate this to the web I would be half way there but there always seems to be too much white space and then I end up trashing the file and trying over and over again..

At the moment I use a few services to promote listings but I have an endless urge to create my own single property websites. It seems easy but as I am finding its a bit more advanced when it comes to creating it on screen.

Thanks so much

for your help and time Nancy,  I will be returning and reading up on your site soon.

Darren

[pziecina]

You could do this using css.

Using the image provided as your example -

place the main image as your background, then place each individual image and then using opacity make them completely transparent. When the user hovers over the image use css animations change the opacity gradually to make them apear on screen, (reverse the opacity when the mouse moves out of the image area).

Use rounded corners to make the image apear as a circle.

There are however a number of problems that you should consider.

1. How will your user know to hover over the area, in order to make the image apear.
2. How will you handle the 'hover' on mobile devices

you could use javascript to handle the animation and detect the 'hover/touch' action, and place a placeholder text saying to hover/touch in order to inform the user of the action required.

You could also do the entire thing using svg.

[Nancy OShea]

Web design is nothing like print design and vice versa.

A printed page is static.  The height, width, margins & text sizes never change.   Web pages are the complete opposite in that they must remain flexible and adhere to modern coding standards so the end user's device (whatever it may be) can properly render the page.   It's challenging even for seasoned experts.

A great print concept rarely translates perfectly to the web.   And I think that's where most print designers paint themselves into a corner.

When designing a room, build the structure first.  Then add paint, furniture and accent pieces to appointed areas.  It's the same with web design.  Build your structure first with HTML & CSS.   Then add your content.

Dreamweaver comes with several Starter Pages including one for Real Estate.

You'll find it under File > New > Starter Templates.

After you save the file as index.html, DW creates assets for you in your local site folder.

Nancy