hoachen Posted May 25, 2006 Share Posted May 25, 2006 I want to create a two columns table for my webpage.The first column will be contain small image and the second column will be same image as the fisrt one but will become bigger when the user click on the column 1 (small image) Have anybody did this before? Can anyone give me some advice or example? I really help with this. Thanks and cheers,hoachen Link to comment Share on other sites More sharing options...
scott100 Posted May 25, 2006 Share Posted May 25, 2006 Give the right picture an id so you can then you can access it's properties, then change it's size.<img src="xxx.jpg" id="leftImg" onmouseover="rightImg.style.width='100px';rightImg.style.height='100px'"/><img src="xxx.jpg" id="rightImg" style="height:50px;width:50px" />to change it back just add an onmouseout and give it new values Link to comment Share on other sites More sharing options...
hoachen Posted May 25, 2006 Author Share Posted May 25, 2006 But, I don't want the big image show without clicking the small image. Give the right picture an id so you can then you can access it's properties, then change it's size.<img src="xxx.jpg" id="leftImg" onmouseover="rightImg.style.width='100px';rightImg.style.height='100px'"/><img src="xxx.jpg" id="rightImg" style="height:50px;width:50px" />to change it back just add an onmouseout and give it new values<{POST_SNAPBACK}> Link to comment Share on other sites More sharing options...
scott100 Posted May 25, 2006 Share Posted May 25, 2006 But, I don't want the big image show without clicking the small image.<{POST_SNAPBACK}> ok so modify it slightly<img src="xxx.jpg" id="leftImg" onmouseover="rightImg.style.width='100px';rightImg.style.height='100px';rightImg.style.display='block';"/><img src="xxx.jpg" id="rightImg" style="display:none;height:50px;width:50px" /> Link to comment Share on other sites More sharing options...
scott100 Posted May 25, 2006 Share Posted May 25, 2006 I done this for someone a while back, i think it may be close to what you want. <html><head><script>function show(page) {var x=document.getElementById('largePic');x.style.display="block";x.src=page;}</script><style>img.thumbnail{cursor:pointer;height:100px;width:100px}</style></head><body><img class="thumbnail" onmouseover="show(this.src)" src="http://www.google.co.uk/logos/olympics06_luge.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" src="http://eur.i1.yimg.com/eur.yimg.com/i/eu/hp/yuk1.gif" /><br /><img class="thumbnail" onmouseover="show(this.src)" src="http://w3schools.invisionzone.com/style_images/w3sbanner.gif" /><!-- This is the large picture --><img id="largePic" src="#" style="display:none;position:absolute;top:10px;left:250px;height:300px;width:500px" /></body></html> make sure you change this <img id="largePic" src="#" style="it's coming up with style=& quot Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now