Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jan 2014
    Posts
    4
    Member #
    38132

    May someone give me advice on how to go about hover buttons?

    I have this webpage:
    http://www.freewebs.com/nuglahfansit...hstarhouse.htm
    That Im designing.


    ( I have by the way, a "matmice/2005 era dollz webdesigner" level of design. [You wouldnt understand it unless you were webdesigning around 12-16 years old in 2005 ])


    As you can see the doors and windows are not at their correct coordinates, which I will fix and isnt the issue: My issue is that, due to all these new devices and stuff, like ipads and samsung galaxies, etc. I am really confused on how I should go about designing this page.

    What I want: is for all the doors to be on their coordinates, to be on the image, and as you can see Ive put image map links on the original image of the house, then placed other images of teh same window or door, that also changes when you hove your mouse over it. To give the illusion the door or window is opening.

    My question is, how can I do this in a better way? When I originally designed this on a computer, all the doors were in places and stuff. But it changed and all of a sudden its not. Plus, people have their pages set to different sized and stuff. How can I achaive the same result without all the mess?


    If you can answer this thank you so much!!!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    A CSS method would be to use "relative positioning" instead of "absolute positioning". This will be a problem with different screen sizes though.

    Another method would be to carefully position <div> sections to "piece-together" your image and use hovers on the <div>'s. Again, resizing will need to change the ratio (dimensions) of each div background image. Not easy to do.

    If it were me doing this, because your entire image is only 272KB in size, I would create 12 copies (or however many there are) of the entire image and alter each one to visually change the window or door. Preload the images and then use responsive image maps JQuery so that the positions remain accurate no matter what the size is.

    Responsive Image Maps jQuery Plugin

    Each time the mouse hover is over the correct part, the whole image gets swapped to the correct image. They key is to preload them so you don't see any flashes as the images get swapped.

    On that example JQuery image, resize your browser and you'll see the image change size, but the hover coordinates remain accurate. That example is not doing any image swapping, they merely show a tooltip and change link URLs.

    It will take some experimentation to see if you can get it working without any "image flashes" during the swapping of images.

    Good luck.
    Last edited by mlseim; Jan 07th, 2014 at 01:36 PM.


  4. #3
    Junior Member
    Join Date
    Jan 2014
    Posts
    4
    Member #
    38132
    Thank you so much!

    Would someone need to install the plugin in order to see the Jquery created image?

    Because Im looking on the website, and I dont see anything happening to any of the powerpuff girls everytime I hover over them, maybe because I didnt install the plugin.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    All that happens on the powerpuff girls is the pointer changes to a "hand", and when you click on a girl, a pop-up info box appears. They key point is that they use image mapping (which is what you'll use), and as the image changes size, the mapping coordinates automatically adjust.

    On your site, when you hover on a "window or door", instead of a pop-up info box, it will swap images to the correct one that has the window opened. You'll be using 'hover' instead of 'onclick'.

    By "plugin", they mean that you would already be using JQuery on your web page and they have an extra javascript function to use. JQuery is javascripting.

    Pretty much your entire web page that has the house image would be HTML, JQuery. Duplicating what they're doing might be easy, but doing the image swapping would add some complexity to it. I'm thinking that you may not have so much javascripting experience? I have use JQuery before, but like you, I'm not so much of an expert at it.

    Is your project just for fun, or is it related to creating a website for a client? Perhaps you can hire a freelancer to assist?
    Last edited by mlseim; Jan 07th, 2014 at 04:15 PM.


  6. #5
    Junior Member
    Join Date
    Jan 2014
    Posts
    4
    Member #
    38132
    I think I see now... I dont have a lot of javascript experience. How do I put this on my site? Do I put in an HTML code, or a javascript code?

    Also, if the viewer of the website hadnt installed JQuery, will they be able to view it?

    Again, thank you so much! I learned something new. Oh and this is for fun, the website is for myself. Well, I'm working on a project.

  7. #6
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    Over the weekend, I'll try to create some example ... I'm not a javascript expert, but maybe I can hack away at something close.

    JQuery is javascripting. If someone has it turned-off, it will not work for them ... either will one million other websites that they visit. If someone has javascripting disabled, they deserve the web experience that they get ... it's their own fault.


  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,772
    Member #
    5580
    Liked
    723 times
    Here is my test page ...
    Responsive Image Maps jQuery Plugin

    I only did the door and window left of the door.

    There might br flicker until the images are loaded.

    Try resizing and see if the map adjusts.

    Is this what you were looking for?



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:13 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com