PDA

View Full Version : thumbnail gallery: how to display 'active/visited link' with an image?

teamturbo
06-09-2005, 10:57 PM
Hi,

I'm doing a small website for my architecture firm which requires thumbnail gallery made of white squares with red borders. On clicking a red box, the main images load into a div area.

What I'm trying to figure out is how to change the thumbnail box, so that upon loading, the box becomes a solid red, essentially becoming an 'active link' in the thumbnail gallery. The box remains red until another one is clicked.

Also, whatever code would solve this, would also word for ''visited links,' where clicked on boxes would become gray? I suspect the solid color thumbnails could be a CSS solution, but if actual images were involved for the thumbnails, it would be Java, right? Thanks for any help.

A sketch of what I have in mind:


http://img298.echo.cx/my.php?image=19nf.jpg1.gif
Mr J
06-09-2005, 11:03 PM
Take a look here this might help you out

www.huntingground.freeserve.co.uk/scripts/img_links.htm
teamturbo
06-17-2005, 04:29 PM
Thanks, that works perfectly. The other stuff on the site was also very helpful.
teamturbo
06-17-2005, 04:57 PM
Mr J,

In this site I'm trying to to iFrames as well. A list of projects is on the left and each project with its thumbnails gets loaded into the frame. My problem is to show the link active. That is, when you click on project Elementary School, and it loads into the frame, I'd like the link to change color. Any suggestions?
Mr J
06-17-2005, 05:16 PM
Take a look here.

www.huntingground.freeserve.co.uk/scripts/text_links.htm

See if one of these examples is to your liking
teamturbo
06-20-2005, 08:05 PM
Mr J,

I got the java script working like it should but I'm running into one slight problem. When you click on a project, it loads a page into the iframe with the thumbnails and images. Naturally, the first image in the sequence of thumbnails is displayed. So in the link of the first thumbnail, I changed the image source to what you called the "Onlclick image." However, when you mouse over it, it changes to the default image, "Onmouseout image." I'm trying to maki it stay Onclick until another thumbnail is selected. Is that possible?

I appreciate the help.
Thanks,
Roman
Mr J
06-20-2005, 11:45 PM
Can you post your code or url?
teamturbo
06-21-2005, 04:58 PM
I don't yet have access to the url. This is exactly your code, but I'm using only two colors (2.gif and 3.gif). It's been ages since I've done any code. I changed the first thumbnail tag,
<img src="2.gif" border="0" id="image1"></a>
to "3.gif", but then it remains its color, of course, when other thumbnails are selected. However, when I click back on it, and then click on other thumbnails everything works fine. Is there some way to eliminate the static thumbnail tags and just call images from the java script? That way, it would be possible to set up a default image that is eliminated by a counter? I have no idea. Anyway, your script is great as it is. Thanks,
Roman

<html>
<head>
<title>test</title>

<script type="text/javascript">
var images = new Array("2.gif","2.gif","3.gif") // list images to preload
var preloadimages=new Array() // preloads images
for (i=0;i<images.length;i++) {
preloadimages[i]=new Image()
preloadimages[i].src=images[i]
}

Lastid = ""

function m_over(id)
{
if(Lastid != id)
{document.getElementById(id).src = images[1]}
}

function m_out(id)
{
if(Lastid != id)
{document.getElementById(id).src = images[1]}
}

function m_click(id)
{
document.getElementById(id).src = images[2]
if (Lastid != "" && Lastid != id)
{document.getElementById(Lastid).src = images[1]}
Lastid = id
}

</script>
</HEAD>
<BODY>


<a href="#null" onmouseover="m_over(image1);" onmouseout="m_out('image2')" onclick="this.blur(); m_click('image1');document.bigimage.src='harborstep1.jpg'">
<img src="2.gif" border="0" id="image1"></a>
<a href="#null" onmouseover="m_over('image2');" onmouseout="m_out('image2')" onClick="this.blur();m_click('image2');document.bigimage.src='harborstep2.jpg'">
<img src="2.gif" border="0" id="image2"></a>
<a href="#null" onmouseover="m_over('image3');" onmouseout="m_out('image3')" onClick="this.blur();m_click('image3');document.bigimage.src='harborstep1.jpg'">
<img src="2.gif" border="0" id="image3"></a>


<div id="image">
<img src="harborstep1.jpg" width="200" height="200" alt="" name="bigimage" />
</div>

</body>
</html>
Mr J
07-12-2005, 02:24 PM
In reply to your email.

Please try the following


<script type="text/javascript">
<!--

var images = new Array("../../images/thumb1.gif","../../images/thumb2.gif") // list images to preload
var preloadimages=new Array() // preloads images
for (i=0;i<images.length;i++) {
preloadimages[i]=new Image()
preloadimages[i].src=images[i]
}

Lastid = ""

function m_over(id){
if(Lastid != id){
document.getElementById(id).src = images[1]
}
}

function m_out(id){
if(Lastid != id){
document.getElementById(id).src = images[0]
}
}

function m_click(id){
document.getElementById(id).src = images[1]
if (Lastid != "" && Lastid != id){
document.getElementById(Lastid).src = images[0]
}
Lastid = id
}

// -->
</script>


Add

onload="m_click('image1')" to the opening BODY tag

The above script reflects that you are only using 2 images so the default will show thumb1, onmouseover will show thumb2, onmouseout will show thumb1.

Onclick will show thumb2 and remain until another is clicked.

When the page loads the first thumbnail will show thumb2.

Keep the image tags as you have them now and just swap the script

Hope this helps