PDA

View Full Version : how to make 2 images on one hover or 1 image and text with one hover?



TAAB
Mar 6th, 2012, 04:49 AM
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!

webdev1958
Mar 6th, 2012, 05:02 AM
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.

TAAB
Mar 6th, 2012, 05:09 AM
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 :)

sean3838
Mar 6th, 2012, 05:27 AM
Can we see your code? Or give us a link to your site.

webdev1958
Mar 6th, 2012, 06:12 AM
......but I don't know javascript at all so that is the catch.

ok, so then - "Houston, we have a problem" :eek:

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.


<!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>

aaronhockey_09
Mar 6th, 2012, 07:30 AM
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 ?

TAAB
Mar 6th, 2012, 07:31 AM
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?

webdev1958
Mar 6th, 2012, 07:41 AM
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.