Jump to content

Image Replace - 3 Thumbs and a Main Image


THRobinson

Recommended Posts

I'm not very good with programming, still learning HTML5/CSS3, so I apologize if this is a dumb request. I'm doing a web page (online portfolio) and I have the layout done and looking near how I want, however, on pages where I am showing samples of my work, I have imageA1 large and in the centre, and to the right, 3 thumbs (imageA1, imageA2, imageA3) so when you click a thumb the central image loads to that jpg. I want to avoid using flash. As it is now, if I click imageA1, it loads the page ../imageA1.html, if I click the thumbnail for image1B, it loads .../image1B.html etc... I'm hoping someone can point me to where I can find a good copy/paste script so that I load .../imageA.html and when I click the thumbs its a simple image replace for the central image instead of loading another html. That way, if I have 10 pieces in my portfolio with 3 images each, I only have 10 html/pages to load instead of 30. Hopefully that made sense. :D I've found image replace but, always 1 image and a click or mouseover swaps it to another image. I want 1 image in the centre, and 3 thumbs that when clicked or mouseovered swap the central larger image. Thanks.

post-39881-0-05372600-1364666864_thumb.jpg

Link to comment
Share on other sites

Here's a bare-bones system that you can adapt. There is nothing magical in the image names (they don't need to be numbered) or the id names or the function names.

<!DOCTYPE html>  <html>    <head>	  <script type="text/javascript">	    function changePic () {		  document.getElementById("mainpic").src = this.getAttribute("data-picname");	    }	    function init () {		  document.getElementById("thumb1").onclick = changePic;		  document.getElementById("thumb2").onclick = changePic;		  document.getElementById("thumb3").onclick = changePic;	    }	    window.onload = init;	  </script>    </head>    <body>	  <img src="starter.jpg" id="mainpic">	  <img src="thumb1.jpg" id="thumb1" data-picname="big1.jpg">	  <img src="thumb2.jpg" id="thumb2" data-picname="big2.jpg">	  <img src="thumb3.jpg" id="thumb3" data-picname="big3.jpg">    </body></html>

Link to comment
Share on other sites

Awesome.... will give it a try ASAP. Will be a great help if it works, I kinda dreaded having a site loading 30 different pages to look at 10 examples. Thanks.

Link to comment
Share on other sites

Finally re-working my website, looks the same but WAY WAY fewer DIVs than before. Started work on the page that includes this script and not co-operating. I click and no images seem to change. Did I change something I shouldn't have? My artwork is in an images folder so, added the images/, and the artwork shows up on my page, just no reaction to clicking.

<!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 name="generator" content="HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>THRobinson - Design/Photography</title><style type="text/css" media="screen">@import url("main.css");</style><!--Script created by DreamWeaver CS5 for Rollover Image. Validation shows errors, assuming because jscript.--><script type="text/javascript">function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}</script><!--Script for thumbnail/image swap.--><script type="text/javascript">			function changePic () {				  document.getElementById("mainpic").src = this.getAttribute("data-picname");			}			function init () {				  document.getElementById("thumb1").onclick = changePic;				  document.getElementById("thumb2").onclick = changePic;				  document.getElementById("thumb3").onclick = changePic;			}			window.onload = init;</script></head><body onload="MM_preloadImages('images/logob.jpg','images/workb.jpg','images/infob.jpg','images/contactb.jpg')"> <div class="container"> <div class="header"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('logo','','images/logob.jpg',1)"><img src="images/logo.jpg" alt="logo" width="150" height="170" border="0" id="logo" name="logo" /></a><img src="images/bar_01.jpg" width="600" height="170" alt="titlebar" /><a href="artwork.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('artlink','','images/workb.jpg',1)"><img src="images/work.jpg" alt="artwork link" width="50" height="170" border="0" id="artlink" name="artlink" /></a><a href="info.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('info','','images/infob.jpg',1)"><img src="images/info.jpg" alt="information" width="50" height="170" border="0" id="info" name="info" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactb.jpg',1)"><img src="images/contact.jpg" alt="contact" width="50" height="170" border="0" id="contact" name="contact" /></a></div> <div class="menu"></div> <div class="artwork">  <img class="artlarge" src="images/image_1a.jpg" id="mainpic" width="550" height="350" alt="mainpic" />  <img class="artthumb1" src="images/image_1b.jpg" id="thumb1" width="150" height="100" alt="thumb1" data-picname="images/image_1a.jpg" />  <img class="artthumb2" src="images/image_2b.jpg" id="thumb2" width="150" height="100" alt="thumb2" data-picname="images/image_2a.jpg" />  <img class="artthumb3" src="images/image_3b.jpg" id="thumb3" width="150" height="100" alt="thumb3" data-picname="images/image_3a.jpg" /></div> <div class="blurb"></div> </div></body></html>

Link to comment
Share on other sites

Make sure you're checking for errors in your browser console, there are links in my signature that describe how to use error consoles in each browser. In IE you can open that with F12, with Chrome it is Ctrl-Shift-I.

Link to comment
Share on other sites

Sadly I know zilch about java... just nearing the end of a small HTML/CSS correspondence class that kinda mentions java and had a few simple samples to cut/paste into the code. Deirdre's Dad was kind enough to send me some basic code to use for my situation but, doesn't want to work for me in EI/Chrome where I'm testing my site from. I used CTRL+SHFT+I in Chrome, but, not showing me errors that I can see, just, the code. Same as I see in Dreamweaver CS5. Not sure if the onclick isn't working, or I linked the images wrong. When it comes to java, all I know is quite literally, onclick means something is gonna happen when clicked, getElementByID means it's looking for the ID of something... and that's about all I know. :D

Link to comment
Share on other sites

When you open the developer tools in Chrome, make sure to click on the Console tab on the far right. All messages from Javascript will go there. You can use things like the Elements tab to see the live structure of your page (e.g., after Javascript has modified it, exactly what the browser is using), the Network tab to look at all requests going out, etc. The console tab is for debugging Javascript.

Link to comment
Share on other sites

Console tab, when clicked, shows a window with a single blue > and nothing else. Clicked around and such but nothing changes and no messages appear in the console. Maybe the code is fine? I'm just missing something to go with it?

Link to comment
Share on other sites

If you haven't yet, refresh the page with the console open, there may be an error when the page loads. If you're not seeing anything there then it sounds like there are no errors though. One thing you can do is add some alert statements to things like the init and changePic functions to verify that those are being run when they should be.

Link to comment
Share on other sites

Refresh didn't do anything... like I said, I know zilch about java, just doing a small intro class for html/css so, zero clue about inits and functions etc. Just hoped it was something simple that someone looking at my code would see and know where it went wrong, like data-picname is wrong, or missed punctuation somewhere, etc. :umnik2:

Edited by THRobinson
Link to comment
Share on other sites

That's the point of checking the console, any syntax errors would be reported there. It will also report runtime errors. It won't show a message if your code is running correctly but just not doing what you want it to. I don't see an obvious error, I don't think that having an onload attribute on the body would overwrite the one you're setting for window.onload. You can try removing the body onload handler and see if that works though.

Link to comment
Share on other sites

I removed the onload="MM_preloadImages('images/logob.jpg','images/workb.jpg','images/infob.jpg','images/contactb.jpg')" from the body and totally worked... I only had that there because Dreamweaver added it when I created the rollover images. Would never have guess that that would have affected the image replace. Thanks for the suggestion... I would have sat there playing with the IDs and file locations etc, for hours with (obviously) no results.

Link to comment
Share on other sites

If you still want that image preloading code to run, since you're running your init function on load, you can add that preloading code to your init function:

function init () {  document.getElementById("thumb1").onclick = changePic;  document.getElementById("thumb2").onclick = changePic;  document.getElementById("thumb3").onclick = changePic;  MM_preloadImages('images/logob.jpg','images/workb.jpg','images/infob.jpg','images/contactb.jpg')}

Link to comment
Share on other sites

Seems to work fine. Oddly, I decided to try using an external javascript.js file for the site, and bam... thing just died. That console brings up many issues, most I simply don't get and pretty much all are related to the Dreamweaver generated script for the rollover images. Switched it back, save myself some headache. Small site so, not much code to leave in the html. I coulda sworn, the rollovers were much simpler and involved less code when I used it years ago. Guess next issue I need to figure out, the prof wants everything done in DTD XHTML 1.0 Strict, which seems to show more errors than if I changed it to DTD XHTML 1.0 Transitional... :facepalm:

Edited by THRobinson
Link to comment
Share on other sites

That Dreamweaver code is made to be generic. For a single rollover effect you can even just do this: <img src="image1.jpg" onmouseover="this.src='image2.jpg';" onmouseout="this.src='image1.jpg';"> You can even do rollovers without any Javascript, just by using CSS.

Link to comment
Share on other sites

I will never understand how you guys know all this. I Google and pray. :D I figured the code was excessive when I saw it in Dreamweaver... all I needed was a simple rollover clickable link. What I have works but, seems problematic.

Link to comment
Share on other sites

function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}window.onload=function(){var art = document.getElementById("artwork");var art_imgs = art.getElementsByTagName("img");var art_lrge = document.getElementById("mainpic");for(i=0;i<art_imgs.length;i++)    {    if(i>0)        {            var current_img=art_imgs[i].src.replace("_thumb",""); // remove filename that defines this as a thumb image (amend to your needs)            current_img=current_img.replace(".gif",".jpg"); // if gif thumbnail convert to jpg extension to large image extension (amend to your needs)            MM_preloadImages(current_img) // preload each large image        art_imgs[i].onclick=function()            {            current_img=this.src.replace("_thumb","");// remove filename that defines this as a thumb image (amend to your needs)            current_img=current_img.replace(".gif",".jpg");// if gif thumbnail convert to jpg extension to large image extension (amend to your needs)            art_lrge.src=current_img;            art_lrge.alt=this.alt; //thumbnail alt apply to large img alt            art_lrge.title=this.alt;//thumbnail alt apply to large img title            }        }    }}

all you do is add images to artwork container, data-picname not needed as you a duplcating where src will do, height width should be controled by css, if size of thumbnails is constant

<div id="artwork">  <img class="artlarge" src="../images/alien/1cha_imgash.jpg" id="mainpic" width="550" height="350" alt="mainpic" />    <img src="../images/alien/1cha_imgash_thumb.gif" width="150" height="100" alt="thumb1" data-picname="../images/alien/1cha_imgash_thumb.gif" />  <img src="../images/alien/1cha_imgbrett_thumb.gif" width="150" height="100" alt="thumb2" data-picname="../images/alien/1cha_imgbrett_thumb.gif" />  <img src="../images/alien/1cha_imgdallas_thumb.gif" width="150" height="100" alt="thumb3" data-picname="../images/alien/1cha_imgdallas_thumb.gif" /></div>

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...