Change color when onmouseover - javascript
I want to change the color of a piece from image when onmouseover but not received:
My code:
<img src="demo_usa.png" width="960" height="593" alt="Planets" usemap="#planetmap">
<map name="planetmap" id="map">
<area id="myMap" shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch(this.id, '#ff9999');" />
</map>
<script type="text/javascript">
function colorSwitch(id, color) {
element = document.getElementById(id);
element.style.background = color;
}
</script>
What am I doing wrong?
Try this code..
HTML:
<area shape="rect" coords="0,0,120,126" alt="Sun" href="#"
onMouseOver="colorSwitch('map', '#ff9999');" />
Javascript:
<script type="text/javascript">
function colorSwitch(id, color)
{
element = document.getElementById( id );
element.style.background = color;
}
</script>
Note that this.id will send the id of the element <area ..> that is null in the code.. You need to send the string as the id of the map element
Areas cannot have background colours; try this:
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;">
</div>
</div>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
}
.planetmarker:hover {
background-color: #ff9999;
}
</style>
You can alternatively also use JavaScript:
<script type="text/javascript">
function setOpacity(id, level) {
element = document.getElementById(id);
element.style.opacity = level;
}
</script>
<style type="text/css">
.planetmarker {
position: absolute;
z-index:1;
background-color: #ff9999;
opacity: 0;
}
</style>
<div id="planetmap">
<img id="backgroundimage" src="demo_usa.png" width="960" height="593" alt="Planets"/>
<div id="planet.1" class="planetmarker" style="left:0px;top:0px;width:120px;height:126px;" onMouseOver="setOpacity(this.id, 1);" onMouseLeave="setOpacity(this.id, 0);">
</div>
</div>
Related
add overlay in specific position in HTML map
I have a static image made interactive using the concept of HTML maps.
Coordinates of the image set by uploading on https://imagemap.org/
Expected Behavior:
An overlay should display on hover in its respective box. For example, when the mouse hovers over red box, the overlay text should come in the red box itself, if it hovers on green then in green and so on.
Current Behavior:
The overlay text position is not coming in its respective box. It is displayed at the bottom. To achieve this, I am thinking of appending the div that contains the text right after the respective area tag when it is clicked.
My code:
<body>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card" style="width:40%; height: 10%;">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
</body>
area{
cursor: pointer;
}
$('area').hover(function(){
????
})
Fiddle- https://jsfiddle.net/woke_mushroom/2u3kbnv9/14/
I think easiest way to show content inside a certain "area" is to make it a child-element of that area. You can use any block-element (e.g. <div></div>) as area. You will be be way more flexible this way as with using image maps.
Also showing contents when hovering can be achieved without any javascript with the :hover css pseudo class.
Below I positioned some boxes with css flex and hide/show the contents with css. You might want to position them in a css grid or some other way (like absolutely positioned in front of an image).
.container {
display: flex;
flex-wrap: wrap;
width: 30em;
}
.area {
cursor: pointer;
width: 15em;
height: 15em;
border: 2px solid black;
box-sizing: border-box;
}
.area > span {
opacity: 0;
}
.area:hover > span {
opacity: 1;
}
#area-red {
background-color: red;
}
#area-green {
background-color: green;
}
#area-blue {
background-color: blue;
}
#area-yellow {
background-color: yellow;
}
<div class="container">
<div id="area-red" class="area">
<span>Red contents</span>
</div>
<div id="area-green" class="area">
<span>Green contents</span>
</div>
<div id="area-blue" class="area">
<span>Blue contents</span>
</div>
<div id="area-yellow" class="area">
<span>Yellow contents</span>
</div>
</div>
You need to associate the image with the image map, so
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" >
Then set the position of the thing you want to move to be absolute:
<div class="card" style="width:40%; height: 10%; position:absolute;">
Then access the mouse pointer position in the event handler:
$('area').hover(function(e)
{
const card = document.querySelector('.card');
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseenter(function(e)
{
const card = document.querySelector('.card');
$(card).show();
card.style.top = e.clientY+'px';
card.style.left = e.clientX+'px';
});
$('area').mouseleave(function(e)
{
const card = document.querySelector('.card');
$(card).hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
<div class="card" style="width:40%; height: 10%; position:absolute;">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
$(function() {
$('area').mouseenter(function() {
let coords = this.coords.split(',').map(a => a.trim())
$('.card').css({display: 'block', top: coords[1] + 'px', left: coords[0] + 'px', width: coords[2] - coords[0], height: coords[3] - coords[1]})
});
$('area').mouseleave(function() {
$('.card').css({display: 'none'})
});
});
.interactive-map {
position: relative;
}
.card {
display: none;
position: absolute;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map" >
<img usemap="#image_map" src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg">
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area title="Red" coords="0,0,150,150" shape="rect">
<area title="Green" coords="150,0,300,150" shape="rect">
<area title="Blue" coords="0,150,150,300" shape="rect">
<area title="Yellow" coords="150,150,300,300" shape="rect">
</map>
</div>
This code will place the overlay nicely in one position and will avoid flicker by using "pointer-events: none" in the css. It also auto-calculate the position and size of the overlay based on the area tags.
(Note: I have altered the area coordinates based upon your requirement that each color be considered its own box)
As you are specifying coords attribute to your area, you can specify cards left and top property
let pos = e.target.coords.split(",");
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
Initially set it's style to display none, then on some event calculate its actual position and set its left and top. Add padding left and top to show text exactly in center.
$('area').on("click", function(e) {
let pos = e.target.coords.split(",");
const card = document.querySelector('.card');
card.style.top = pos[1] + 'px';
card.style.left = pos[0] + 'px';
card.style.display = "block";
});
.card {
position: absolute;
}
area {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="interactive-map">
<img src="https://www.politicalmetaphors.com/wp-content/uploads/2015/04/blog-shapes-square-windows.jpg" usemap="#image_map">
<div class="card" style="width:40%; height: 10%; display: none;">
<div class="card-body" style="width: 20%;">
This is some text within a card body.
</div>
</div>
<map name="image_map">
<area id="one" title="Red" coords="25,33,68,65" shape="rect" data-placement="25,33,68,65">
<area title="Green" coords="132,30,194,67" shape="rect">
<area title="Blue" coords="22,147,74,192" shape="rect">
<area title="Yellow" coords="131,144,197,188" shape="rect">
</map>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
I want to hide all other div's when i click on one div
I am making a software were i need to hide all other div's when i click on another div. what happens now is that the div's just stack on top of each other. and the div only dissapears when i click the same div again.
i already tried some of the JavaScript and jQuery code on this platform but can't quite figure it out myself.
--- THIS IS THE SCRIPT IM USING TO SHOW AND HIDE THE DIV'S ---
<script type="text/javascript">
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
</script>
</head>
<body>
--- THESE ARE MY CLICKABLE AREA'S WHERE THE USER CAN CLICK ON TO SHOW AND HIDE A DIV ---
<div class="div-voog" id=""> <img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area onclick="toggle_visibility('vooglid');" alt="" title="" href="#" shape="poly" coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area onclick="toggle_visibility('vwimpers');" alt="" title="" href="#" shape="poly" coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area onclick="toggle_visibility('vwenkbrauw');" alt="" title="" href="#" shape="poly" coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />
<area onclick="toggle_visibility('vooghoek');" alt="" title="" href="#" shape="poly" coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />
</map>
</div>
--- AND THESE ARE MY DIV'S CONTAINING THE INFORMATION IT HAS TO SHOW AND HIDE ---
<div class="test" id="vooglid"> Symptoom ooglid</div>
<div class="test22" id="vwimpers"> Symptoom wimper</div>
<div class="test33" id="vwenkbrauw"> Symptoom wenkbrauw</div>
<div class="test44" id="vooghoek"> Symptoom ooghoek</div>
</body>
</html>
I want the result to be that when I click one of the areas above, the corresponding div shows and all other divs hide.
You need to first hide all the other elements, so that then you can show the one you want to see. You could change all of them to have the class="test" and then prepend to your script something like this:
var tests = document.getElementsByClassName("test");
for (i = 0; i < tests.length; i++) {
tests[i].style.display = "none";
}
UPDATE
The full script would be something like this:
<script>
function toggle_visibility(el) {
var tests = document.getElementsByClassName("test");
for (i = 0; i < tests.length; i++) {
tests[i].style.display = "none";
}
el.style.display = "block";
}
</script>
And the html:
<div>
<area class="test" onclick="toggle_visibility(this)">A</div>
<area class="test" onclick="toggle_visibility(this)">B</div>
<area class="test" onclick="toggle_visibility(this)">C</div>
<area class="test" onclick="toggle_visibility(this)">D</div>
</div>
Something like that ?
const AlldivTest = document.querySelectorAll('.test');
document.querySelector('#Map').onclick =e=>{
if (!e.target.matches('area')) return;
e.stopPropagation();
AlldivTest.forEach(d=>{
if (d.id===e.target.dataset.elm)
{ d.style.display = (d.style.display==='none') ? 'block' : 'none' }
else
{ d.style.display = 'none' }
})
}
.test { display: none; border:1px solid grey; padding: 5px 10px }
img { width:550px; height:550px }
<div class="div-voog">
<img class="map" src="images/tekening-oog-vrouw-550px.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area data-elm="vooglid" alt="" title="" href="#" shape="poly"
coords=170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area data-elm="vwimpers" alt="" title="" href="#" shape="poly"
coords="170,251,159,253,140,251,134,249,126,244,121,241,118,237,114,226,113,221,118,214,128,204,141,195,160,187,176,178,194,171,208,165,230,157,249,155,268,153,284,151,300,151,326,154,341,158,358,168,371,178,380,190,394,209,402,221,408,235,412,244,403,247,392,242,378,231,366,219,347,207,334,203,316,199,286,199,263,203,246,208,221,218" />
<area data-elm="vwenkbrauw" alt="" title="" href="#" shape="poly"
coords="43,157,62,120,84,103,114,85,132,75,151,65,191,47,204,38,232,31,268,31,298,31,317,31,339,33,365,42,390,47,408,51,429,59,445,61,467,69,484,74,501,85,504,127,498,141,494,146,471,136,446,123,432,119,412,113,396,108,376,100,362,96,354,93,334,90,321,90,308,89,295,87,271,83,260,81,232,75,218,74,207,73,192,73,181,76,150,95,122,109,102,118,78,138,62,149,54,158,49,163,47,167" />
<area data-elm="vooghoek" alt="" title="" href="#" shape="poly"
coords="388,275,396,270,401,270,407,266,408,263,411,258,420,263,425,269,428,273,432,278,435,280,434,282,434,285,422,284,414,279" />
</map>
</div>
<div class="test" id="vooglid"> Symptoom ooglid</div>
<div class="test" id="vwimpers"> Symptoom wimper</div>
<div class="test" id="vwenkbrauw"> Symptoom wenkbrauw</div>
<div class="test" id="vooghoek"> Symptoom ooghoek</div>
[edit]
For a quick see of "my" part of code you have to use only one script and it should b: like this
<script>
$(function () {
$('.map').maphilight({
fade: false
});
$('.map').maphilight({
fillColor: '008800'
});
$('#hilightlink')
.mouseover(function (e) { $('#square2').mouseover(); })
.mouseout(function (e) { $('#square2').mouseout(); })
.click(function (e) { e.preventDefault(); });
$('#linkerbeenlink')
.click(function (e) {
e.preventDefault();
var data = $('#linkerbeen').data('maphilight') || {};
data.neverOn = !data.neverOn;
$('#linkerbeen').data('maphilight', data);
});
$('#linkerbeen,#linkerbeenlink2')
.click(function (e) {
e.preventDefault();
var data = $('#linkerbeen').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#linkerbeen').data('maphilight', data).trigger('alwaysOn.maphilight');
});
$('#vinger2link')
.click(function (e) {
e.preventDefault();
var data = $('#vinger2').data('maphilight') || {};
data.neverOn = !data.neverOn;
$('#vinger2').data('maphilight', data);
});
$('#vinger2,#vinger2link2')
.click(function (e) {
e.preventDefault();
var data = $('#vinger2').mouseout().data('maphilight') || {};
data.alwaysOn = !data.alwaysOn;
$('#vinger2').data('maphilight', data).trigger('alwaysOn.maphilight');
});
const AlldivTest = document.querySelectorAll('.test');
document.querySelector('#Map').onclick =e=>{
if (!e.target.matches('area')) return;
e.stopPropagation();
AlldivTest.forEach(d=>{
if (d.id===e.target.dataset.elm)
{ d.style.display = (d.style.display==='none') ? 'block' : 'none' }
else
{ d.style.display = 'none' }
})
}
});
</script>
use jquery code that will work for hiding all other div when you click on current div
$('a').on('click', function(){
var target = $(this).attr('vooglid');
$("test"+target).show().siblings("div").hide();
});
but you must change your ids for apply that code
Do you already have tried adding all other div's to a CSS class?
Try this code:
function toggle_visibility(var id){
$("#vooglid").addClass("hide_div");
$("#vooghoek").addClass("hide_div");
$("#vwimpers").addClass("hide_div");
$("#id").removeClass("hide_div");
});
CSS:
.hide_div{
display: none;
}
I did this a few months ago and it worked fine.
Change text and image on mouseclick/mouseover in Javascript
I figured out how to change image on mouseover through javascript. But unable to figure how to add description below the image on mouseover/mouseclick on respective image. I'm not good at jQuery. Please help me in solving the problem in javascript only.
<html>
<head>
<style>
.imgStyle {
height: 100px;
width: 100px;
border: 3px solid grey;
}
</style>
</head>
<body>
<img src="img/img_01.jpg" id="mainImage" />
<div id="describ01" style="display:none">Description 01</div>
<div id="describ02" style="display:none">Description 02</div>
<div id="describ03" style="display:none">Description 03</div>
<div id="describ04" style="display:none">Description 04</div>
<br />
<div id="myDiv" onmouseover="changeImage(event)">
<img src="img/img_02.jpg" class="imgStyle" />
<img src="img/img_03.jpg" class="imgStyle" />
<img src="img/img_04.jpg" class="imgStyle" />
<img src="img/img_05.jpg" class="imgStyle" />
</div>
<script type="text/javascript">
function changeImage(event) {
event = event || window.event;
var targetElement = event.target || event.srcElement;
if(targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
}
}
</script>
</body>
</html>
If you want to use javascript then the answer will be
document.getElementById("description").innerHTML = 'Hello World';
and if you want to use JQuery then
$("#description").html("Hello World");
Hopefully it will help you
Give each of your images a data attribute:
<img src="img/img_02.jpg" class="imgStyle" data-text='text goes here' />
Then use this on hover:
if(targetElement.tagName == "IMG") {
document.getElementById("mainImage").src = targetElement.getAttribute("src");
document.getElementById("description").innerHTML = this.getAttribute("data-text");
};
Now you only need one description div as before.
Code not running using array.push
HTML :
<html>
<head>
<script>pushImages();</script>
<title>Float Image Gallery</title>
</head>
<body>
<button onclick="showAllGalleries();">Show gallery</button>
<div class="gallery">
<div class="gallery-close">
<a href=#><img class="gallery-close-button" src="http://bit.do/closeicon" onclick="hideAllGalleries();" /></a>
</div>
<div class="gallery-content">
<!-- Whenever need to add a image, add this code :
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
-->
<!--
Information :
When adding photo that is not 1:1, it will force shrink to 1:1.
-->
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
<div class="gallery-image-cell">
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
<img class="gallery-content-image" src="" alt="Please add image here" />
</div>
</div>
</div>
</body>
</html>
CSS :
<style>
.gallery {
display:none;
width:100%;
height:100%;
left:0;
bottom:0;
top:auto;
right:auto;
position:fixed;
background-color:#cccccc;
opacity:50%;
overflow-y: scroll;
}
.gallery-close {
width:auto;
height:auto;
margin-top:10px;
margin-left:10px;
}
.gallery-close-button {
width:30px;
height:30px;
}
.gallery-content {
width:100%;
height:auto;
text-align:center;
}
.gallery-content-image {
width:20%;
height:100%;
opacity:0.6;
filter:alpha(opacity=60);
}
.gallery-content-image:hover {
background-color:#ffffff;
opacity:1.0;
filter:alpha(opacity=100);
}
.gallery-image-cell {
width: 100%;
height: 0;
padding-bottom: 20%;
margin-left: auto;
margin-right: auto;
}
</style>
Javascript :
<script tyep="text/javascript">
function showAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='inline';
}
}
function hideAllGalleries(){
var adsArray = document.getElementsByClassName("gallery");
for (var i = 0; i<adsArray.length; i++){
adsArray[i].style.display='none';
}
}
function pushImages(){
var imageArray = document.getElementsByClassName("gallery-content-image")
var imageLinkArray[];
imageLinkArray.push("http://www.catchannel.com/images/feral-cats-birds.jpg");
imageLinkArray.push("http://www.catchannel.com/images/orange-tabbies.jpg");
imageLinkArray.push("http://thenypost.files.wordpress.com/2013/08/tiger132056-300x300.jpg");
imageLinkArray.push("http://bioexpedition.com/wp-content/uploads/2012/06/Indochinese-Tiger-picture.jpg");
imageLinkArray.push("http://www.east-northamptonshire.gov.uk/images/Dog_2.jpg");
imageLinkArray.push("http://www.pet365.co.uk/product_images/r/008/dd_black_with_dog__41452_zoom.jpg");
imageLinkArray.push("http://www.texasbirds.info/backyard/images/mountain_bluebird2_male.jpg");
imageLinkArray.push("http://www.honolulumagazine.com/images/2013/Oct13/Print/Bird_Fairy.jpg");
/*Use imageLinkArray.push("") to add a image; Add enough image.*/
for (var i=0; i<imageArray.length; i++){
imageArray[i].src = imageLinkArray[i];
}
}
</script>
I'm not sure where the problem is, but after clicking the button nothing happened.
Please help. Any help will be appreciated. Thank you.
<script>pushImages();</script>
This is calling a function before the DOM is even loaded, which should throw an error in your console. Place it at the bottom of your code or wrap it in window.onload = function() { .... }.
You're also missing an equal sign in this line: var imageLinkArray[]; (should be var imageLinkArray = [];.
I also suggest not practicing inline scripting. It's bad practice to do so. Try adding an event handler to the body (onclick only supports one event handler).
document.getElementsByTagName("body")[0].addEventListener("load", showAllGalleries, false);
How to get box index number using only javascript
i want to get box index number using Javascript. like i have four box so i want each box text have this appropriate number.
<head>
<script type="text/javascript">
function () {
var Main= document.getElementById('container').getElementsByTagName('div');
for(i=0; i<Main.length;i++){
}
}
</script>
<style>
.box {
float:left;
margin-left:20px;
position:relative
}
.width {
position:absolute;
left:0;
top:0;
color:#FFF;
font-size:20px;
}
</style>
</head>
<body>
<div id="container">
<div class="box">
<img src="img/sample1.jpg" height="200" width="300" />
</div>
<div class="box">
<img src="img/sample2.jpg" height="200" width="350" />
</div>
<div class="box">
<img src="img/sample3.jpg" height="200" width="150" />
</div>
<div class="box">
<img src="img/sample4.jpg" height="200" width="100" />
</div>
</div>
</body>
window.onload=function() {
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML+= '<span class="title">box '+(i+1)+'</span>';
}
}
DEMO
Replace all your JS with this below and place the script tag as the last tag in your body tag to assure the DOM is ready when this is called. You could also call this function from the onload event.
(function(){
var Main= document.getElementById('container').getElementsByTagName('div');
for(var i=0; i<Main.length;i++){
Main[i].innerHTML += "box"+i;
}
})();
http://jsfiddle.net/mmjW9/