PDA

View Full Version : swap image?


lunatic
June 16th, 2006, 04:44 PM
Okay gang, I am an html dunce and I need help. I have built a very simple html website for my guy and his buddy who are trying to get their cartoons out to the world. Everything is built using tables because that is all I know so please please PLEASE don't tell me I should be using CSS because I don't have time to learn it right now. :P

Anyway, the "Cartoons" page features one of their cartoons at the top and a little blurb about how the cartoons came about. The featured cartoon when you launch the page will change every month. Below the blurb is a list of other cartoons that can be viewed. I don't really want to make a new page just to display each cartoon, that would be silly. What would be ideal is to be able to click on the name of the cartoon in the list and it would show up in the space at the top of the page where the featured cartoon is.

Is it possible to do some kind of swap image in a table cell in html? Or do I need to use frames or some such thing? Like I said, I don't know much html code so help a sister out! :pleased:
simplistik
June 16th, 2006, 05:11 PM
Maybe do a google for DHTML image swap or sth... I know I've seen it done. I'd do the search myself... but I'm just lazy.

As for the CSS... well you really should be using CSS. It's using DIVs instead of Tables that you don't want to do... has nothin to do w/ CSS ;)
ditt0
June 16th, 2006, 05:57 PM
Well I haven't worked with tables lately so I suppose I'm starting to forget stuff about tables, but here is a basic example with divs/css/javascript.Hope it helps.
lunatic
June 16th, 2006, 06:48 PM
Thanks to both of you. I will check out the file ditt0. :)

Is there another way I should be going about this you think? And no I don't like div's - too much messing around. I learned tables awhile ago and since I hardly ever write html I just use tables those rare ocassions I do need to do html. Bad me, I know! :sure:
bwh2
June 16th, 2006, 07:46 PM
i would really look using iframes. this seems like the perfect situation for them.
Krilnon
June 16th, 2006, 08:17 PM
JavaScript seems like a good enough way to do it, it wouldn't require a separate page (I don't think you can just target images in an iframe).

Here is something I wrote quickly, though I'm certainly far from being a JavaScript expert of any kind.


<html>
<head>
<title>Images</title>
<script language="javascript">
function swapImage(targetImage) {
swapTarget.src = targetImage;
}
</script>
</head>
<body>
<a onClick="swapImage('image1.jpg');" href="#">Image 1</a>
<a onClick="swapImage('image2.jpg');" href="#">Image 2</a>
<a onClick="swapImage('image3.jpg');" href="#">Image 3</a>
<a onClick="swapImage('image4.jpg');" href="#">Image 4</a>
<a onClick="swapImage('image5.jpg');" href="#">Image 5</a>
<img src="default.jpg" id="swapTarget">
</body>
</html>


The only thing that you would need to do for each link is put the image that you wanted to load in the onClick handler. Here's a link to what it should look like: http://www.reclipse.net/kirupa/swap/images.html
Templarian
June 17th, 2006, 05:12 PM
PHP drag to folder and does it by itself method (requires Krilnon's JS). I typed it in browser from some other code so if it doesnt work then post.

<?php
$uploadedfiles = "<table>";
$dir = "comics";
$i=1;
if (is_dir($dir)) {
if ($dh = opendir($dir)) {
while (($file = readdir($dh)) !== false) {
if ($file !== "." AND $file !== ".." AND $file !== ".htaccess"){
$size = filesize("comics/$file");
$uploadedfiles .= "<tr><td><a onClick=\"swapImage('comics/{$file}');\" href=\"#\">".basename($file)."</a></td></tr>";
}
}
$i++;
}
closedir($dh);
}
$uploadedfiles .= "</table>";
print($uploadedfiles);
?>
lunatic
June 19th, 2006, 08:31 PM
Hey sorry I never got back to this. I have too many freaking projects going on at once! :sure:

I looked at ditt0's code and though it is exactly what I want it looks complicated! So I'm going to try Krilnon's code because it's short and sweet - just like me!! :pleased:
lunatic
June 20th, 2006, 11:26 AM
Hey it works brilliant! Thanks so much Krilnon and everyone else that chipped in! :thumb: