PDA

View Full Version : How can I create a stacked list of thumbnails, each one expanding with more info?



obededom
10-12-2005, 11:07 PM
As the subject suggests, I'm interested in having a "picture/information" page on my site. I want a simple list of 5 to 10 thumbnailed pictures when the page loads in which each one is stacked on the other. I would like each to expand with a bigger picture and text information about the picture via user interaction. I have two options - I don't care which one I use:

#1. Once loaded, I would like each thumbnailed picture, once clicked, to expand and show a bigger picture and text information about the picture. I wouldn't mind using this option but this option is more of a hassle and causes more clutter/less interaction.

#2. As I thought about this, I think a better option would be to expand to a bigger picture and text information using a mouse rollover instead of a click so that, once a user moves the mouse back off the bigger picture and information, it reduces back to the thumnail. This would allow for a better organized and better looking page. This effect, I would assume, is almost like text links changing color using mouse rollover.

* Which option would you suggest using?

* Is option #2 even possible?

* I would prefer using option #2.

* I've experimented with this code (however, it used option #1, not #2, and it requires clicking an entirely different button to do so):

<script langauge="javascript">

function changeIt(){

if(document.checker.checker.value==1){
var width=100
var height=100

document.checker.checker.value=2
}else{
document.checker.checker.value=1
var width=284
var height=229
}

document.main.width=width
document.main.height=height
}

</script>

<form name="checker">
<input name="checker" type="hidden" id="checker" value="2" checker="1">
</form>

<img src="image.gif" name="main" width="100" height="100">
<BR>
<input type="button" value=" Change " onclick="changeIt()">

:thumbsup: Thanks ahead of time guys for any help,
~obededom~

AlexVN
10-12-2005, 11:29 PM
I prefer #1 because it is more common interface. But of course the #2 may look better is some designs.
Anyway, you may use the "onnouseover" and "onmouseout" events to implement #2.
Example:


<script type="text/javascript">
function showHide(toShow, toHide) {
document.getElementById(toShow).style.display ='block';
document.getElementById(toHide).style.display ='none';
}
</script>
<div onmouseover="showHide('img2', 'img1');" onmouseout="showHide('img1', 'img2');">
<img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
<img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;">
</div>

obededom
10-13-2005, 05:47 AM
Thanks - the code works well. However, is there a way I could implemenent text into the script when mouseover or should I just create a graphic with text in it that is used with mouseover?

AlexVN
10-13-2005, 08:00 AM
Try this:



<script type="text/javascript">
function showHide(toShow, toHide, text) {
document.getElementById(toShow).style.display = 'block';
document.getElementById(toHide).style.display = 'none';
var desc = document.getElementById('description');
while (desc.firstChild) {
desc.removeChild(desc.firstChild);
}
desc.appendChild(document.createTextNode(text));
}
</script>
<div style="float: left;" onmouseover="showHide('img2', 'img1', 'Use onmouseover/onmouseout!');" onmouseout="showHide('img1', 'img2', 'How to change image and text?');">
<img id="img1" src="http://www.codingforums.com/images/smilies/confused.gif">
<img id="img2" src="http://www.codingforums.com/images/smilies/thumbsup.gif" style="display:none;"><br>
</div>
<span id="description">How to change image and text?</span>

obededom
10-14-2005, 04:45 AM
Hey man, thanks a lot. That script works even better with the text. I have one question, though. How can I have more than one picture stacked on top of each other (I've tried using the script more than once, plus using <br>, but it doesn't work) like this:

:)
:)
:)
:)
:)

??

Also, I tried changing the font to a different color (in this case white) using Dreamweaver and I can't for some reason. Maybe the time of day has something to do with it, don't know :).

Anyway, thanks again,
~obededom~

AlexVN
10-14-2005, 07:15 AM
Note the id attribute - it should be unique.
When add next block of images change the images id and change the showHide calls.

obededom
10-14-2005, 02:16 PM
That works (I am able to have more than one). However, it's not really organized. Using Dreamweaver, I was able to get the pictures stacked on top of each other, but during mouseover, the text with every picture appears at the top in the same place.