Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    how to make 2 images on one hover or 1 image and text with one hover?

    I am building a website that will have a world map.

    Each country is a different image and has a corresponding image that is exactly the same with the exception of color, therefore when you hover over the united states then it will change color. This is not a problem.

    What I am having a problem with is figuring out how to make the Countries Name appear above the map when and only when the cursor is hovering the appropriate country.

    I am also open to making the name text instead of an image if that will make this work. I just need the countries color to change and the name to appear above the map when your cursor hovers the country.

    Any help would be awesome!

  • #2
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    If you want to use only html/css then if it can be done will depend on how you have marked up your html.

    Otherwise you can do it relatively easily with javascript by attaching an onmouseover event handler to each country's image which replaces the content of the element at the top of the map containing the country's name with the currently hovered on country's name.

    But bear in mind that :hover or onmouseover will not work on most touch screen devices like ipads and so it's probably better to make the country images clickable as well to trigger the changing of the country name.

  • Users who have thanked webdev1958 for this post:

    TAAB (03-06-2012)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by webdev1958 View Post
    If you want to use only html/css then if it can be done will depend on how you have marked up your html.

    Otherwise you can do it relatively easily with javascript by attaching an onmouseover event handler to each country's image which replaces the content of the element at the top of the map containing the country's name with the currently hovered on country's name.

    But bear in mind that :hover or onmouseover will not work on most touch screen devices like ipads and so it's probably better to make the country images clickable as well to trigger the changing of the country name.
    I am not concerned about mobile devices as they will be redirected to a mobile friendly version of the map with a list of country names and their associated flag.

    I have been looking and people seem to think javascript is the way to go, which i am totally open to but I don't know javascript at all so that is the catch. If there was a way to make the country change on hover as well as the country name (with the country being clickable) in javascript I would be all ears!

    the page literally contains a background image, a logo and some copyright text so html structure is very flexible as long as I can make this map work

  • #4
    New Coder
    Join Date
    Jan 2012
    Posts
    97
    Thanks
    1
    Thanked 13 Times in 13 Posts
    Can we see your code? Or give us a link to your site.

  • #5
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by TAAB View Post
    ......but I don't know javascript at all so that is the catch.
    ok, so then - "Houston, we have a problem"

    Although not a major javascript task, it's not a trivial one either and is certainly not a simple description on how to do it.

    Below is a quick and simple demo:

    Basically I am simulating your country images with just dummy images and layout but the concept of one way of doing it is the same.

    The array countrydata contains a row of data for each country. The first element in each row is the default mouse off image file name for the country. The second element is the hover country image and the third element is the country nane for that row and is displayed above the map when a country is hovered on.

    The javascript assigns onmouseover and onmouseout event handlers which replace the country image and displays the country's name when it is hovered and returns the country image to the defaul and clears the country name from the display when you hover off a country.

    Since you say you don't know js at all, it would take forever for me to explain in detail how the js works but hopefully with a bit of googlking you can get the jist of it and use the demo as a starting point.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css"></style>
            <script type="text/javascript">
                var countryData = [
                    ['num1.jpg','num4.jpg','Country 1'],
                    ['num2.jpg','num5.jpg','Country 2'],
                    ['num3.jpg','num6.jpg','Country 3']
                ];
            </script>
        </head>
        <body>
            <p id="pCountryName"></p>
            <div id="mapContainer">
                <img src="num1.jpg" alt="" />
                <img src="num2.jpg" alt="" />
                <img src="num3.jpg" alt="" />
            </div>
            <script type="text/javascript">
                //assign the onmouseover/onmouseout event handlers for the country images
                var imgOA = document.getElementById('mapContainer').getElementsByTagName('img');
                for(i=0; i<imgOA.length; i++){
                    imgOA[i].onmouseover = function(){
                        handleCountryOn(this);
                    }
                    imgOA[i].onmouseout = function(){
                        handleCountryOff(this);
                    }
                }
                function handleCountryOn(hoveredCty){
                    var imgSrc = basename(hoveredCty.src,'');
                    //loop through countryData to find the data for hovered country
                    for(i=0; i<countryData.length; i++){
                        if(imgSrc == basename(countryData[i][0],'')){ //found row for the hovered country
                            hoveredCty.src = countryData[i][1];
                            document.getElementById('pCountryName').innerHTML = countryData[i][2];
                        }
                    }
                }
                function handleCountryOff(hoveredCty){
                    var imgSrc = basename(hoveredCty.src,'');
                    //loop through countryData to find the data for hovered country
                    for(i=0; i<countryData.length; i++){
                        if(imgSrc == basename(countryData[i][1],'')){ //found row for the hovered country
                            hoveredCty.src = countryData[i][0];
                            document.getElementById('pCountryName').innerHTML = '';
                        }
                    }
                }
                function basename(path, suffix) {
                    var b = path.replace(/^.*[\/\\]/g, '');
                    if (typeof(suffix) == 'string' && b.substr(b.length-suffix.length) == suffix) {
                        b = b.substr(0, b.length-suffix.length);
                    }
                    return b;
                }
            </script>
        </body>
    </html>
    Last edited by webdev1958; 03-06-2012 at 06:15 AM.

  • Users who have thanked webdev1958 for this post:

    TAAB (03-06-2012)

  • #6
    Regular Coder
    Join Date
    Dec 2010
    Posts
    424
    Thanks
    22
    Thanked 56 Times in 56 Posts
    could he put some span tags hard coded in specific locations.
    And then have them hidden on default
    and on hover display that specific span tag ?

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This may sound weird but I am trying to open a website shop, against all odds, and as of tomorrow I will find out wether or not I have to take my mother to court as she was helping me. I am a graphics guy, if you need something printed, designed, or created then I am pretty good at that, self taught but pretty good. I am basing my entire business of utilizing the freelance market. Basically I would be the middle man and manage groups of freelancers essentially doing customer service and quality control which I have experience in. Coding however is my downfall, I know html and some css but thats about all and I am rusty at that.

    The whole point of this map page is to make fake page hits with Google Analytics in order to determine which countries I am receiving the most traffic from. Based on the redirect I will them send the visitor to a version of my website in their native language.

    If I send you the PSD file what would it cost me to have you splice it and code the page for me?

  • #8
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by TAAB View Post
    If I send you the PSD file what would it cost me to have you splice it and code the page for me?
    Thank you for the enquiry but I don't accept or go looking for jobs over the internet or from anyone I can't meet face to face. For me the risk of potential problems doing business that way is just not worth it for me at this stage.

    There is an appropriate marketing type forum on coding forums, and many other websites as well actually, where you can advertise your requirement and you'll probably get more offers for help there.

    But just a word of obvious caution, make sure you are sure of the developer's bona fides before parting with any cash. There are a lot of sharks masquerading as web developers on the www.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •