Many nowadays will argue that both inline styles and inline javascript is "old hat".
Maybe use this demo option as a guide (which is slightly different to the other option I posted earlier)
The
iconsData 2D array contains the info needed to created your social network clickable <divs>.
Each row of
iconsData contains the image file name for the icon and the url to go to when the icon is clicked.
You can add/remove as many rows in the array as you like without having to touch the rest of the javascript or html. The divs and their functionality are created automatically in the
window.onload event handler.
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">
.socNetIcons {
width: 48px;
height: 48px;
cursor: pointer;
float: left;
margin-right: 20px;
}
</style>
<script type="text/javascript">
var iconsData = [
['num1.jpg','urlFacebook'],
['num2.jpg','urlYouTube'],
['num3.jpg','urlMySpace']
];
window.onload=function(){
for(i=0; i < iconsData.length; i++){
var newDiv = document.createElement('div');
newDiv.setAttribute('class','socNetIcons');
newDiv.style.backgroundImage = 'url("'+iconsData[i][0]+'")';
newDiv.num = i;
newDiv.onclick=function(){window.open(iconsData[this.num][1]);}
document.getElementById('socNetIconsContainer').appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="socNetIconsContainer"></div>
</body>
</html>