Image with multiple clickable links and rollovers

  • Hi
    I hope I have the right forum for this question.
    I am just learning HTML/CSS and am curious about the best way to create something like the clickable image with multiple divs and rollovers as seen on this page:
    https://theletteredcottage.net/our-house/
    Is this something which can be created entirely through the dash on the page itself or does it require fiddling with function files etc?
    I have read about Image Map though this is obviously different.
    Any straight forward advice for a coding novice would be much appreciated.
    Cheers

Viewing 5 replies - 1 through 5 (of 5 total)

  • It looks like the way that “house tour” is set up is that the whole house diagram is a background image, relatively positioned (normal layout position on the page). Then the small clickable rooms are also background images — but they are absolutely positioned on top of the bigger background image of the whole house. The smaller images are clickable just using regular coding for making images into links.

    I’m not totally sure but I really doubt that was done in WP or with a plug in or something like that. Doing that kind of CSS work is fairly tedious and difficult if you don’t know CSS and HTML pretty well. But it’s doable if you have a lot of patience! I’d start by doing it on a regular webpage and once you have it working and laid out the way you want, then figure out how to copy it into WP.

    Thread Starter The Painted Hive

    (@the-painted-hive)

    Thanks. I figured it was something like that. I know this is probably pushing my luck, though any chance of an example code to get me started? I don’t quite know how to begin and a template would be helpful.
    Also, what exactly do you mean by “regular webpage” as opposed to WordPress?
    Thanks

    I meant a static html page (vs. WP) — just because you can work on it locally very easily and you’re not interfacing with the visual editor and/or any php code.

    I agree that the concept and effect is very cool…

    I have an example of a webpage that I created for a CSS class a while ago that might be useful as it uses a bunch of absolute positioning of images. But the page is not on a live site — so I don’t know how I could get it to you…

    Duh, I just googled your user name and found your site and see that you have an email listed — do you want me to email you offline from here? Nice site, BTW, and your daughter is adorable!

    Thread Starter The Painted Hive

    (@the-painted-hive)

    Wow, thanks so much for your generosity and kind words. Please feel free to email me off-line if you have any further advice to offer.
    My current (and much neglected) Blogger hosted site is soon to be re-directed to my new WordPress site though as I’m not a developer and am doing all the set-up myself (learning as I go) it has been a slow process so any help I can get is much appreciated.
    Thanks again!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Image with multiple clickable links and rollovers’ is closed to new replies.