Question from a total and complete CSS/HTML noob

[Jschmuck2]

Take a look at this template over on OSWD here

See in the bottom right there, where is says "Random Image?" I'd like to have the links above that control what pictures show up in that box but I want the page to stay the same (on the index.html)

How would I go about doing that?

 

[PhatoseAlpha]

Are you talking switching through multiple images? If so, you're looking for something more like javascript/ajax.

 

[Jschmuck2]

Actually, I just want one image per button, but in that small box beneath those links...all while staying on the same index.html page

 

[Markbnj]

Easiest way would probably be to setup a few divs each with an img tag and appropriate src attribute, then make all but the current one style="display:none;". Then have a javascript function to change images by setting the one you want to "display:block;" and the others to "display:none;"

Pretty straightforward to do with a little javascript and CSS knowlege.

 

[Jschmuck2]

Seemingly, neither of which I possess

 

[skrilla]

If I following your post, maybe you could try something like this... Try switching out your sidebar div with the code below and then edit the code to match what your images are named in the /image folder. Edit: Trying to format the code...

<div id="sidebar">
<h3>More information:</h3>
<p>Do you want more information about this design (and other designs I have released)? Then you should check out these pages:</p>

<script type="text/javascript">
function switchImage(x){
document.getElementById('switch').src="images/" + x;
}
</script>
<p>
<a class="sidelink" href="javascript:switchImage('test.jpg');">My website</a><span class="hide"> | </span>
<a class="sidelink" href="javascript:switchImage('another.jpg');">My OSWD.org page</a><span class="hide"> | </span>
<a class="sidelink" href="javascript:switchImage('yetanother.jpg');">Valid XHTML</a><span class="hide"> | </span>
<a class="sidelink" href="javascript:switchImage('stillyetanother.jpg');">Valid CSS</a>
</p>

<h3>Random image:</h3>
<p><img id="switch" class="photo" src="images/test.jpg" alt="" height="100" width="130"></p>

<h3>Wise words:</h3>
<p>"It happens every day: information overload! Time for a reboot..."<br>
(traditional haiku poem)</p>
</div>

 

[Jschmuck2]

Wow - that's perfect. Like - perfect perfect.

So my next logical question (and a million thank you-s by the way) is where did you learn that?

 

[IronWing]

Go to dynamicdrive.com. You can learn a lot by looking at the scripts and seeing what they do.

 

[thirtythree]

Originally posted by: Jschmuck2
Wow - that's perfect. Like - perfect perfect.

So my next logical question (and a million thank you-s by the way) is where did you learn that?

http://www.w3schools.com/ is also pretty good. Just select what you want to learn on the left column.

 

[Jschmuck2]

Yeah, I'm reading up on it slowly but surely.

 

[Jschmuck2]

Ok - so one last question: I'd like to do something very similar but this time with text. I feel like it's something I could do with just CSS. I want to click a link and have the text displayed within a div (within the container already on the page) for those links. Does that make any sense?