Web Design Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed Forums > Web Design > Web Design Help
Reload this Page

help with tables and linking please.

Discuss help with tables and linking please. in the Web Design Help forum on Dev Shed.
help with tables and linking please. Web Design Help forum discussing topics such as video editing, audio editing, animation, etc. This is also the place to get recommendations on preferred web authoring tools.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old November 24th, 2004, 12:30 AM
fifthgeneric fifthgeneric is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 fifthgeneric User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 58 m 6 sec
Reputation Power: 0
help with tables and linking please.
alright, I figured this was a better place to ask this than the HTML forum. Anyway, I what I want to do shouldn't be all that difficult, I just need some help figuring it out.

I'm working in Dreamweaver and I want to make it so that clicking a link in one table will open an image in another table. I understand disjointed rollovers, but I don't want the image to change if I rollover the link, only if it's clicked. any help you guys could provide me would be appreciated. Thanks!
Reply With Quote
  #2  
Old November 24th, 2004, 01:07 AM
BonRouge's Avatar
BonRouge BonRouge is offline
Winemaster
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Sendai, Japan
Posts: 1,354 BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 3 Weeks 3 Days 2 h 52 m 6 sec
Reputation Power: 86
Is this the kind of thing you're looking for (the basic idea)?
Reply With Quote
  #3  
Old November 24th, 2004, 01:16 AM
fifthgeneric fifthgeneric is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 fifthgeneric User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 58 m 6 sec
Reputation Power: 0
Quote:
Originally Posted by BonRouge
Is this the kind of thing you're looking for (the basic idea)?
yeah that's exactly what i'm talking about. could you clue me in on how to do it?
Reply With Quote
  #4  
Old November 24th, 2004, 07:24 AM
BonRouge's Avatar
BonRouge BonRouge is offline
Winemaster
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Sendai, Japan
Posts: 1,354 BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 3 Weeks 3 Days 2 h 52 m 6 sec
Reputation Power: 86
OK. Have a look at the code. If you checked the source earlier, look again (you might as well just look here) because I changed it a little to make it simpler.

There's some javascript and css to hide the divs. 'onclick' will hide all of the divs again and then display the one you specify.

I added 'a {cursor:pointer;}' so that the hand appears over the links.

Erm... that's it really. If you need to know anything else, just ask and I'll try my best to answer.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Climber-switch</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />

<style type="text/css">
<!--
body {background:white;}
div {color:red; font-size:large; padding:10px;}
a {cursor:pointer;}
.visible {display:block;}
.hidden {display:none;}
-->
</style>
<script type="text/javascript"><!--
function switchImg(div)
{
var option=['wine','beer','whisky'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.className=(option[i]==div)? "visible" : "hidden"; }
}
//-->
</script>

</head>

<body>

<div><a onclick="switchImg('wine');">wine</a></div>
<div><a onclick="switchImg('beer');">beer</a></div>
<div><a onclick="switchImg('whisky');">whisky</a></div>

<div id="wine" class="hidden">
<img src="wine.jpg" height="100" width="100" alt="wine" />
<p>This is some wine.</p>
</div>
<div id="beer" class="hidden">
<img src="beer.jpg" height="100" width="100" alt="beer" />
<p>This is some beer.</p>
</div>
<div id="whisky" class="hidden">
<img src="whisky.jpg" height="100" width="100" alt="whisky" />
<p>This is some whisky.</p>
</div>

</body>
</html>

(I wrapped 'code' tags around this before, but then half of the code mysteriously disappeared - I wonder if that usually happens...?)

Cheers.
Reply With Quote
  #5  
Old November 24th, 2004, 05:44 PM
fifthgeneric fifthgeneric is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 fifthgeneric User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 58 m 6 sec
Reputation Power: 0
thanks for the help. I've kinda got it working. The text appears when I click on the link, but not the picture. I've made all the changes and created the pictures and it should work, but I'm still gettin the red x. Also, the cursor doesn't change into the glove when it passes over the text that's supposed to cause the picture and additional text to appear.
Reply With Quote
  #6  
Old November 24th, 2004, 06:00 PM
BonRouge's Avatar
BonRouge BonRouge is offline
Winemaster
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Sendai, Japan
Posts: 1,354 BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 3 Weeks 3 Days 2 h 52 m 6 sec
Reputation Power: 86
Let me see what you have.
Reply With Quote
  #7  
Old November 24th, 2004, 06:47 PM
fifthgeneric fifthgeneric is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 fifthgeneric User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 58 m 6 sec
Reputation Power: 0
It's kinda butchered, but these are the parts I cut out that have anything to do with the switchImg.

<script language="JavaScript" type="text/JavaScript">
<!--
function switchImg(i){
document.images["blank"].src = i;
var option=['project.jpg'];
for(var t=0; t<option.length; t++)
{ obj=document.getElementById(option[t]);
obj.className=(option[t]==i)? "visible" : "hidden"; }
}
//-->
</script>

<td width="200" align="left" valign="top" style="font-size: 9px"><font color="#486095" face="Verdana, Arial, Helvetica sans-serif"><div><a onclick="switchImg('project.jpg');">project</a></div><br></td>

<td width="400" align="left" valign="top" style="font-size: 9px"><font color="#486095" face="Verdana, Arial, Helvetica sans-serif"><img src="blank" alt="blank.jpg" name="blank" width="200" height="400" align="right" />
<div id="project.jpg" class="hidden">project.</div></font></td>
Reply With Quote
  #8  
Old November 24th, 2004, 06:56 PM
BonRouge's Avatar
BonRouge BonRouge is offline
Winemaster
Dev Shed Beginner (1000 - 1499 posts)
  
Join Date: Jul 2004
Location: Sendai, Japan
Posts: 1,354 BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level)BonRouge User rank is Second Lieutenant (5000 - 10000 Reputation Level) 
Time spent in forums: 3 Weeks 3 Days 2 h 52 m 6 sec
Reputation Power: 86
Please read my second post.
I changed the code to make it simpler but you don't seem to have noticed.
The hand thing is there too.
Last edited by BonRouge : November 24th, 2004 at 06:58 PM.
Reply With Quote
  #9  
Old November 27th, 2004, 08:49 PM
fifthgeneric fifthgeneric is offline
Registered User
Dev Shed Newbie (0 - 499 posts)
  
Join Date: Feb 2004
Posts: 11 fifthgeneric User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 1 h 58 m 6 sec
Reputation Power: 0
thanks. it works now!
Reply With Quote
Reply

Viewing: Dev Shed Forums > Web Design > Web Design Help > help with tables and linking please.

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 1 hosted by Hostway.