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
    Nov 2014
    Posts
    3
    Member #
    40878

    Imagemap hilight with radio button

    i search and tried for three days and i didnt succeed. i wanted to make picture of car that seperate to two areas one the front side window of the car and second the back side window of the car. and there will be two group of radio buttons . one group for each window to control the opacity of the window. and keep rule in each group the one selection in agroup . here link for what iwant to do :??? ?? ????? - ????? ????? - ????? ?????

    thanks in advance.

  2.  

  3. #2
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Use your cars picture, copy to new layer, delete the background layer and delete everything other than front window from transparent layer. Do the same for back window. Save them as transparent pngs.
    In html: make container div and position it relative. Make three divs Inside the container and position them absolute x 0, y 0. Set cars image as background for first div. Set transparent 'front window' image as background of second div and set its class='front_window'. Set transparent 'back window' image as background of third div and set its class='back_window'.
    Make radio group for front window with the name 'frontWindow' and another radio group withj the name 'backWindow', like:
    <input type="radio" name="frontWindow" class='frontWindow' value="0.7"> <span> Set transparency to 30%</span>
    <input type="radio" name="frontWindow" class='frontWindow' value="0.5"> <span> Set transparency to 50%</span>
    <input type="radio" name="frontWindow" class='frontWindow' value="0.3"> <span> Set transparency to 70%</span>
    Code:
    // implement jquery trigger on radio:
    $('.frontWindow').click(function(){
       var opacity = $(this).val();
       $('.front_window').css('opacity', opacity);
    });
    Do the same for back window.

    !!! I didn't test this !!!

  4. #3
    Junior Member
    Join Date
    Nov 2014
    Posts
    3
    Member #
    40878
    i tried and it didnt work. help please
    Code:
    <div>
    <input type="radio" name="frontWindow" class='frontWindow' value="0.7"> <span> Set transparency to 30%</span>
    <input type="radio" name="frontWindow" class='frontWindow' value="0.5"> <span> Set transparency to 50%</span>
    <input type="radio" name="frontWindow" class='frontWindow' value="0.3"> <span> Set transparency to 70%</span>
    </div>
    <script>
    
    // implement jquery trigger on radio:
    $('.frontWindow').click(function(){
       var opacity = $(this).val();
       $('car').css('opacity', opacity);
    });
    
    
    
    </script>
    
    
    <img src="images/new0.png" alt="" usemap="#Map1" />
    <map name="Map" id="Map">
        <area name="car" alt="" title="" href="#" shape="poly" coords="411,202,390,162,363,161,338,160,316,160,284,160,265,164,250,162,230,201" />
     
    </map>

  5. #4
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You have to kinda pay attention to exactly what sasha was telling you. It wasn't a simple copy/paste solution. This will take some actual work on your part.

    You'll have to get rid of the imagemap altogether. Then, follow sasha's instructions very carefully. You're going to be editing the photos, then implementing the code.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  6. #5
    Junior Member
    Join Date
    Nov 2014
    Posts
    3
    Member #
    40878
    this code worked . when i over the picture the imap work.
    how can i do the same that beside hover the imap will work on radio click button?
    thanks for the help.

    Code:
    <div id="image">
    <img style="border:0;" id="shape1" src="images/new0.png" alt="shape1" usemap="#shape1">
     </div>
    
     
    
    <script>
    $(document).ready(function ()
    {
    	$('#shape1').mapster({
    	singleSelect : false,
    
         mapKey: 'color',
    
    	fillOpacity : 0.3,
    
    });
    });
    </script>
    
    <map name="shape1">
    <area alt="" color="blue" title="" href="#" shape="poly" coords="411,202,390,162,363,161,338,160,316,160,284,160,265,164,250,162,230,201" />
    </map>

  7. #6
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    No idea. You'd have to dig into the mapster.js API to see if it's possible.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  8. #7
    Senior Member sasha_bolcina's Avatar
    Join Date
    Sep 2014
    Location
    Serbia
    Posts
    274
    Member #
    40099
    Liked
    47 times
    Once a machine that knows all the answers was made on a far planet. People were traveling many years to reach it and to ask questions. Finally, the first question to the machine was: "Does God exist?" and the answer was: "You did not formulated the question well".
    And the same answer was given to every next question.

    You have to know a bigger part of the answer to understand it.


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 03:03 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com