Jump to content

getElementById and innerHTML

HTML5

By HTML5
in JavaScript

Recommended Posts

HTML5 Newbie

HTML5

Posted
Posted

I want to make a script that when the mouse goes over a picture it causes a larger version of that picture to appearThe HTML:

  <div id="picture">              </div>  <div id="bar">    <img onmouseover="go1()"      value="<img src='D:\Documents and Settings\Yosef\My Documents\My Pictures\Webpage MISC\DSCF4666.jpg' alt='Main Picture' />"      id="thumb1"     src="D:\Documents and Settings\Yosef\My Documents\My Pictures\Webpage MISC\DSCF4666_t.jpg"      alt="Thumb" />     <img onmouseover="go2()"      value="<img src='D:\Documents and Settings\Yosef\My Documents\My Pictures\Webpage MISC\DSCF4675.jpg' alt='Main Picture' />"      id="thumb2"     src="D:\Documents and Settings\Yosef\My Documents\My Pictures\Webpage MISC\DSCF4675_t.jpg"      alt="Thumb" />       </div>

The CSS:

#picture {    position: absolute;  top: 200px;  width: 500px;  height: 375px;  border: black 1px solid;}#bar {  position: absolute;  top: 800px;  height: 120px;  width: 800px;  border: black 1px solid;}#bar img {  margin: 10px;}

This is the script I was able to make:

function go() {  var picture = document.getElementById("picture");  var thumb1 = document.getElementById("thumb1");    var get = thumb1.value;    picture.innerHTML = get;}function go2() {  var picture = document.getElementById("picture");  var thumb2 = document.getElementById("thumb2");    var get = thumb2.value;    picture.innerHTML = get;}

There has to be a simpler way to do this......How do I script it so that I don't have to repeat function go() to get the second picture to appear

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

it seems like you can condense a lot of the work and reorganize your page a bit. Here's something that might work:HTML

<div id="main">  <img id="big_picture"  src="" alt=""/></div><div><div id="thumbs">  <img id="thumb1" src="thumb1.jpg" alt="" class="thumb" onmouseover="go(this)"/><img src="thumb2.jpg" alt="" id="thumb2" class="thumb" onmouseover="go(this)"/></div>

CSS

#main{  margin: 0px auto;}#big_picture{  height: 500px;  width: 500px;}#thumbs{  margin: 0px auto  text-align: center;}.thumbs{  height: 100px;  width: 100px;}

Javascript

function go(ele){  var image = ele;  document.getElementById("big_picture").src = ele.src;};

not tested, naturally, because then where would be the fun for you? :)edit: forgot to add ID's to to the thumb img's

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var big_screen=document.getElementById("picture")var parent_container=document.getElementById("bar");var child_images = parent_container.getElementsByTagName("img");for(i=0;i<child_images.length;i++){child_images[i].id="swapimge"+i;child_images[i].onmouseover=function(){ img_swap(this)}}}function img_swap(chosen_img){imagename = document.getElementById(chosen_img.id).src;if(imagename.slice(-6,-4) != "_t"){rename=imagename.replace(imagename.slice(-4),"_t"+imagename.slice(-4))}else{rename=imagename.replace("_t.",".");}document.getElementById("picture").style.backgroundImage = "url("+rename+")";}/*--*//*]]>*/</script><style type="text/css">#picture{background: url(../images/world_map_blank.gif) transparent no-repeat center top; height:400px; width:800px; margin:0 auto;}</style></head><body><div id="picture"></div><div id="bar"><img src="../images/world_map_blank_t.gif"/><img src="../images/world_map_europe_highlight_t.gif" /><img src="../images/world_map_row_highlight_t.gif" /><img src="../images/world_map_uk_highlight_t.gif" /></div></body></html>

Link to comment
Share on other sites
HTML5 Newbie

HTML5

Posted
  • Author
Posted

Wow I'm learning alot from those examples! ThanksBut haven't gotten my orgininal problem solved yet.... But working on it :)

I'm sure you could just use css(?) haven't tried this out but..box{width:100px; height:100px;}.box:hover{width:200px; height:200px;}
No that's not what I want, although that would probbly work for other things.What I want is something like:_________________________|..........................................||..........................................||..........................................||..................Blank................| -- bigPicture|..........................................||..........................................||..........................................|------------------------------------__________________________|._____....____.......................||.| Th 1|...|Th2|......................| -- Bar|.--------..-------......................|-------------------------------------Someone Hovers their mouse on thumb 1, which is a smaller version of pic 1, and pic 1 appears in bigPicture.Or they hover it on thumb 2 and pic 2 appears instead etcEDIT: Ok I solved this part :) thanks for all of your examples and tipsThe code I came up with is:HTML:
  <div id="outputArea">        <p style="text-align:center; margin-top: 150px;">Click a picture below!</p>          </div>  <div id="inputArea">         <img src="DSCF4666_t.jpg" alt="Thumb" />     <img src="DSCF4675_t.jpg" alt="Thumb" />     <img src="DSCF4735_t.jpg" alt="Thumb" />     <img src="DSCF4743_t.jpg" alt="Thumb" />     <img src="DSCF4746_t.jpg" alt="Thumb" />     <img src="DSCF4753_t.jpg" alt="Thumb" />     <img src="DSCF4755_t.jpg" alt="Thumb" />     <img src="DSCF4758_t.jpg" alt="Thumb" />     <img src="DSCF4779_t.jpg" alt="Thumb" />            </div>

CSS: 

#outputArea {    position: absolute;  top: 325px;  width: 500px;  height: 375px;  border: black 1px solid;}#inputArea {  position: absolute;  top: 775px;  height: 120px;  width: 800px;  border: black 1px solid;}#inputArea img {  margin: 10px;}

java script: -- Very weird I typed it with a capital j and no spaces but the forum forces the j to lower case and places a space between java and script....

window.onload=function() {    var inputArea = document.getElementById("inputArea");    var childImages = inputArea.getElementsByTagName("img");    for (i = 0; i < childImages.length; i++) {    console.log("i is now %d", i);    childImages[i].id="postImage" + i;    console.log(childImages[i]);    childImages[i].onclick=function() { postImage(this) };  }  }function postImage(chosenImage) {  var recivedImage = document.getElementById(chosenImage.id).src;  console.log(recivedImage);  var showImage = recivedImage.replace("_t", "");  console.log(showImage);  var outputArea = document.getElementById("outputArea");  console.log(outputArea);  outputArea.innerHTML = "<img src='"+showImage+"' alt='' />";  console.log(outputArea.innerHTML);}

And it works great!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...