Thumbnail Anchor Problem

<a href="#imagecontainer"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">')"></a>

<a id="imagecontainer"></a>

Click to expand...

SrWebDeveloper said:

Don't use anchor, replace with div, the MM_setTextOfLayer() function is triggered by an onclick already and better cross browser support using a div as the target container.

Best guess based on your code (untested):

Code:

<div id="thumbnail"><img src="images/Galleries/Campaign/SolaimanFazelCampaignThumb014.jpg" alt="Solaiman Fazel Satine Boutique" id="imageborderthumb" onClick="MM_setTextOfLayer('LayoutDiv2','',' <img src="images/Galleries/Campaign/SolaimanFazelCampaign014.jpg" alt="Solaiman Fazel Satine Boutique Mod" border="1" id="imageborder">')"></div>

<div id="imagecontainer"></div>

On a side note, is this an Adobe or DreamWeaver function, i.e. the old MacroMedia IDE? I am not a fan, it uses complex means to do simple things in my opinion. I am an advocate of learning jQuery which is an open source, popular but VERY stable and well supported Javascript framework which is very cross-browser compatible and strict DOM based. This means better than what you're using. Look into it and plugins from folks to handle advanced image zooming, etc. but easy to code with sensible functions and arguments.

http://jquery.com/ download the library and install so you can do things like this and it just works:

Code:

<a href="#" onclick="$('#two').html('haha, changed content!');return false;">Change Content</a>

Placed in a script.js - it's good to use an external script file than do it inline, far easier to edit or re-edit, i.e. this quick down and dirty untested script:

Code:

<script>
$("div#thumbnail").click(function () {
  $(div#fullsize).html( "<img src='/path/to/fullsized_image.gif' class='large_pics' />");
});
</script>

Get the idea? When div with ID thumbnail is clicked use the html function to replace another div named fullsize with a image with class large_pics. Then just add your styles to your CSS stylesheet for the ID's and class, keep everything separate as it's best practice to separate code from styling.

Hope this helps you (and maybe others following) as to different approaches - I'm sure someone here might add a straight DOM method as well, but this user is very new so the friendly naming conventions and support for jQuery is why I chose not to do that.

Click to expand...

SrWebDeveloper said:

My first code example was an untested guess fix to accomplish your goal, try changing "LayoutDiv2" to "imagecontainer" and adjust your CSS as well to use the latter. Looks like I forgot to do that! The other two examples are concepts of alternative approaches with the key being your're *not* using the MM stuff!!! I included both inline and external (advised) examples.

The foundation you need is a basic understanding of how functions work with arguments passed to it, and of course how CSS works especially selectors, classes and ID's. jQuery merges it all together, basically.

Download the core library as per the documentation then create a file holding the jQuery code (example: script.js) and link it as instructed in the head section just like you would link any Javascript file. Your HTML will also include the thumbnail image wrapped in a div container and of course the empty div container where you want the full version to show, each with id or class so jQuery can find each in its selector and apply the method(s).

Relax, it takes time to grasp all this and don't hesitate to ask questions. But now is the time to do some research on your own, start with the jQuery documentation and a few examples, see what it does, the lightbulb will go on after a few attempts.

Click to expand...