SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: onClick - Help!
-
Dec 18, 2003, 16:33 #1
- Join Date
- Jan 2003
- Location
- Earth:\USA\California
- Posts
- 228
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
onClick - Help!
Hi,
I'm trying to create a portfolio display where my thumbnails are across the bottom of the page and the appropriate larger image displays (as you click each thumbnail) above the thumbnails and to the left side. Above and to the right side, I want the text about the project to appear. I've been able to get the thumbnails to click and make a larger image appear, but I haven't a clue as to how to get the text to change with each thumbnail click as well. Here's what I've done so far.
Code:<script language="javascript"> <!-- function changePict(pict){ document.pictToChange.src=pict } //--> </script>
Code:<a href="#" onClick="changePict('/images/test.gif')"><img src="/images/test_thumb.gif" width="63" height="58" /></a>
Code:<img src="test.gif" name="pictToChange" />
I tried insertingCode:"document.write('insert project description here')
The three sections are laid out as divs and I'm trying to avoid making the project description text an image. I'm trying to stick with pure CSS (still learning!)
Can someone help me with this?
You can see what I'm doing at http://www.eodweb.com/draft/portfolio.htm
Thanks!
Tonidare to Dream, dare to Be...
www.eodweb.com
-
Dec 18, 2003, 17:07 #2
- Join Date
- Dec 2003
- Location
- Florida
- Posts
- 160
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Well, I'm not Javascript expert, but this works in IE 5,6. As far as other browsers, I'm not sure, so you'll have to test it. Also, I'm not certain that this is the best solution, but it should provide you with the functionality you need.
Code:<a onclick="text1.style.visibility='visible'; text2.style.visibility='hidden'; window.status='';">Show 1</a> <a onclick="text2.style.visibility='visible'; text1.style.visibility='hidden'; window.status='';">Show 2</a> <div style="visibility: hidden;" id="text1">This is the text to show when link one is clicked</div> <div style="visibility: visible;" id="text2">This is the text to show when link two is clicked</div>
Bookmarks