HTML and CSS

Layout in CSS

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

« First

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

#21

Aug 7th, 2004

Do you mean something like this accessible example which works in all browsers which I created so long ago for someone else with the same problem?

http://www.emdevelopments.co.uk/demo/iframe/

Replace the numbers by dropping thumbnail images inside the a tags. the href is the full size version. There's no javascript involved, just plain html. Rearrange the code to put the links underneath.

How's that? Or would you prefer me to examine the one you're using?

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

#22

Aug 8th, 2004

Greetings.
Cool!
Thanks a lot for the help.
That is one alternative...but err...yeah, I'd like to know why can't mine work in Firefox

If you can, could you please shed some lights here?

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

#23

Aug 9th, 2004

have you got the rest of the code for it? Or is it scattered throughout a number of other long pages?

•

Join Date: Jun 2003

Posts: 313

Reputation: red_evolve is on a distinguished road

Solved Threads: 0

red_evolve red_evolve is offline

Offline

Posting Whiz

Re: Layout in CSS

#24

Aug 9th, 2004

Greetings.
Ok, below is what I have in gallery.asp

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
// This is the function which does the "picture swapping" in <script> tag
function changePic(n)
{ 
  if(n==0)
    document.images['large'].src = frames['gallery'].im0.src;
  if(n==1)
    document.images['large'].src = frames['gallery'].im1.src;
  if(n==2)
    document.images['large'].src = frames['gallery'].im2.src;
  if(n==3)
    document.images['large'].src = frames['gallery'].im3.src;
}
:
:
<!-- This is a snapshot of what is in the <body>
 tag -->
<!-- "large" contains an empty jpg file, a white square only -->
<!-- Inside <p>
 lies all my folder thumbnails, when clicked, the corresponding html file will load inside the IFrame -->
 
<p>Click on the folders  to view the content.</p>
<br>
<img src="pictures\empty.jpg" width=400 height=300 border=1 name="large" style="position:relative; top:-5px; right:-5px">
 
<p>
<a href="gallery_family.html" target="gallery" class="gallery">
<img src="buttons/folderFamily.gif" name="folder_family" alt="Family" border=0></a>
 
<a href="gallery_nature.html" target="gallery" class="gallery">
<img src="buttons/folderNature.gif" name="folder_nature" alt="Nature" border=0></a>
 
</p>
 
<!-- The Content -->
<div align="center" style="width:inherit">
  <iframe name="gallery" scrolling="no" frameborder="0" width="500px" height="150px" padding="2px">
  <font color="#eeeeee">Your Browser Doesn't Support Frames</font>
  </iframe>
</div>
// This is the function which does the "picture swapping" in <script> tag
function changePic(n)
{ 
  if(n==0)
    document.images['large'].src = frames['gallery'].im0.src;
  if(n==1)
    document.images['large'].src = frames['gallery'].im1.src;
  if(n==2)
    document.images['large'].src = frames['gallery'].im2.src;
  if(n==3)
    document.images['large'].src = frames['gallery'].im3.src;
}
:
:
<!-- This is a snapshot of what is in the <body> tag -->
<!-- "large" contains an empty jpg file, a white square only -->
<!-- Inside <p> lies all my folder thumbnails, when clicked, the corresponding html file will load inside the IFrame -->
    
<p>Click on the folders  to view the content.</p>
<br>
<img src="pictures\empty.jpg" width=400 height=300 border=1 name="large" style="position:relative; top:-5px; right:-5px">
      
<p>
<a href="gallery_family.html" target="gallery" class="gallery">
<img src="buttons/folderFamily.gif" name="folder_family" alt="Family" border=0></a>
          
<a href="gallery_nature.html" target="gallery" class="gallery">
<img src="buttons/folderNature.gif" name="folder_nature" alt="Nature" border=0></a>

</p>

<!-- The Content -->
<div align="center" style="width:inherit">
  <iframe name="gallery" scrolling="no" frameborder="0" width="500px" height="150px" padding="2px">
  <font color="#eeeeee">Your Browser Doesn't Support Frames</font>
  </iframe>
</div>

Say I clicked on the folder_nature folder, so below is the content of gallery_nature.html

 Help with Code Tags 
 HTML and CSS Syntax (Toggle Plain Text) 
<a href="Javascript:parent.changePic(0)" onMouseover="window.status='Mists in the morning.'; return true" onMouseout="window.status=''; return true">
<img name="im0" src="pictures/nature/big08.jpg" border="0" width="60" height="45" alt="Mists in the morning"></a>
 
<a href="Javascript:parent.changePic(1)" onMouseover="window.status='Leaf.'; return true" onMouseout="window.status=''; return true">
<img name="im1" src="pictures/nature/big09.jpg" border="0" width="60" height="45" alt="Leaf"></a>
 
<a href="Javascript:parent.changePic(2)" onMouseover="window.status='Bricks.'; return true" onMouseout="window.status=''; return true">
<img name="im2" src="pictures/nature/big10.jpg" border="0" width="60" height="45" alt="Bricks"></a>
<a href="Javascript<b></b>:parent.changePic(0)" onMouseover="window.status='Mists in the morning.'; return true" onMouseout="window.status=''; return true">
<img name="im0" src="pictures/nature/big08.jpg" border="0" width="60" height="45" alt="Mists in the morning"></a>

<a href="Javascript<b></b>:parent.changePic(1)" onMouseover="window.status='Leaf.'; return true" onMouseout="window.status=''; return true">
<img name="im1" src="pictures/nature/big09.jpg" border="0" width="60" height="45" alt="Leaf"></a>

<a href="Javascript<b></b>:parent.changePic(2)" onMouseover="window.status='Bricks.'; return true" onMouseout="window.status=''; return true">
<img name="im2" src="pictures/nature/big10.jpg" border="0" width="60" height="45" alt="Bricks"></a>

I am not sure whether my concept is correct or not.
But, err, sometimes my algo towards solving problems is just too long and complicated.
Sigh! For example, when I see yours, I would be thinking, why didn't I thought of that?

"Study the past if you would define the future" - Confucius

•

Join Date: Jul 2004

Posts: 764

Reputation: DaveSW is on a distinguished road

Solved Threads: 17

DaveSW

Offline

Master Poster

Re: Layout in CSS

#25

Aug 9th, 2004

Hmm ok that's strange but I'm probably missing something...

I don't know if there are any people on daniweb good with javascript but you might want to try webdeveloper.com - we have an excellent javascript forum there. Sorry Dani...