 |
| |
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-02-2002 20:51
so my feeble mind is trying to recall how to program a page proper and all.... help!
i've got a page that has a variety of 50x50 icons along the left side and i want it so that when one of them is clicked the large version of the image pops up on the right side of the page. click another icon and that new image will replace the previous large one. get what i'm saying?
right now i've got the icon section and larger image section divided separately using css... isn't there a "target" command or something like that i could use?
lost and need help, cheers!
|
Emperor
Maniac (V) Mad Scientist with Finglongers
From: Cell 53, East Wing
Insane since: Jul 2001
|
posted 08-02-2002 21:07
mikey milker: It depends on what you want. A couple of solutions:
1. Use frames and have the larger version open in the other frame (not my favoured approach).
2. Use JavaScript to swap the source of the larger image (I like this solution).
Let us know which (if any) is more like what you were thinking of and we can go from there 
___________________
Emps
FAQs: Emperor
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-02-2002 21:12
What you're looking for, I believe is JS manipulation of the display attribute of each of those big images over there.
code:
<style type='text/css'>
#bigImage1{
display:none;
}
#bigImage2{
display:none;
}
</style>
<script type='fake/javascript'>
bgImg = new Array ('bigImage1',' bigImage2');
change(x){
for(i=0;i<bgImg.length;i++){
document.getElementById(bgImg[i]).style.display = 'none';
}
document.getElementById(bgImg[x]).style.display = 'block';
}
</script>
<body>
<img id='littleImage1' src='littleimage.gif' onclick='change(0)' />
</body>
Make that JS real and cross-browser compatable...that ought to do it.
mobrul
<edit>Beaten again...must get faster...</edit>
<edit>Also fixing what slime adequately points out below...thanks for the careful eye!</edit>
[This message has been edited by mobrul (edited 08-02-2002).]
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-02-2002 21:16
the asylum... only place on the web where you post a coding question at noon on a friday and get two answers within 10 minutes, hahaha thanks.
yeah, frames are the donkey's ass so i'll be going the javascript route.
i suck horribly at coding (watch me fail c programming, weeeee) so this should be a lot of fun. i'll tinker with this stuff a little bit later in the afternoon when i can actually look at what you wrote mobrul, thanks. if there's any other info or links you guys think i'll need post away.
cheers.mikey.milker
|
Slime
Lunatic (VI) Mad Scientist
From: Massachusetts, USA
Insane since: Mar 2000
|
posted 08-02-2002 21:32
Nice code mobrul, but there are two important errors there that should be pointed out. IE may let it work but these two things should be changed:
bgImg = new Array (bigImage1, bigImage2);
should be
bgImg = new Array ("bigImage1", "bigImage2");
since you want an array of strings, not objects.
Second,
document.getElementById[...]...
should be
document.getElementById(...)...
since getElementById is a function, and not an object with properties or an array.
Otherwise that code should be fine, though it won't work on NN4 or IE4, but who cares =)
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-02-2002 22:48
okay well i tinkered with the code for a little bit and didn't really have much luck because i'm braindead. i knocked out a template in photoshop just to make sure we're talking about the same thing...
http://trout.zerominuszero.net/js_example.gif
i guess i just don't know which of the variable in the code to properly edit, agh.
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-02-2002 23:20
Alright
Assumption:
Your css layout is, amoung potentially other things, 2 divs -- 1 for your small images(float:left) and one for your big images (float:right)
Inside each of those divs is all your small or large images, respectively.
code:
<div id='smLeft'>
<img src='01.jpg' />
<img src='02.jpg' />
<img src='03.jpg' />
<!--and so on-->
</div>
<div id='bgRight'>
<img id='01b' src='01b.jpg' />
<img id='02b' src='02.jpg' />
<img id='03b' src='03.jpg' />
<!--and so on-->
</div>
Step 1: make a CSS entry for each big image, and include display:none;
code:
<style type='text/css'>
#01b{
display:none;
}
#02b{
display:none;
#03b{
display:none;
}
<!--etc -->
</style>
Step 2: make a new JS array with the ids of each of your images
ex. bgImg = new Array ('01b', '02b', '03b','and so on');
Step 3: make a function to change the display of your big images
code:
change(x){
for(i=0;i<bgImg.length;i++){
document.getElementById(bgImg[i]).style.display = 'none';
}
//that for loop goes through each of your big images and sets their display to 'none'.
//Essentially it is good for making whatever image is showing, not showing.
document.getElementById(bgImg[x]).style.display = 'block';
//this line takes the value for x you pass to it from the body (we'll get to that in a moment), finds the image
//and changes that display to 'block' which means 'show it', essentially
}
//close your function
</script>
Step 4: Make each small image call this function onclick
code:
<body>
<img src='01.jpg' onclick='change(0)' />
<!--we use 0, because the corresponding big image (01b.jpg) is the 1st element in your array and arrays always start with 0-->
<img src='02.jpg' onclick='change(1)' />
<!--and so on, until you've done this for all your small images-->
If you want to get supa fancy, add an class to each of your small images:
code:
<img src='01.jpg' onclick='change(0)' class='smImg' />
Then define that class in your stylesheet:
code:
.smImg{
cursor:hand;
}
Then when you mouseover the small image, the cursor will change to a hand, just as if it was a link, prompting your users to click.
Like slime said, this little code won't work worth a shit on older browsers...but if you're using a CSS layout and you are Mikey Milker, I don't guess you care.
anymore questions, post your code, let's have a look.
mobrul
[edit]making more functional and fixing a mistake[/edit]
[This message has been edited by mobrul (edited 08-02-2002).]
|
jacethakidd
Nervous Wreck (II) Inmate
From:
Insane since: Jul 2002
|
posted 08-02-2002 23:33
i think the easiest way to do that is with frames. And the page will load a lot faster too because the icons wont have to keep loading.
|
Emperor
Maniac (V) Mad Scientist with Finglongers
From: Cell 53, East Wing
Insane since: Jul 2001
|
posted 08-03-2002 02:16
mm: The solution I suggested here:
www.ozoneasylum.com/Forum2/HTML/000905.html
is the one I was talking about in point two. Here is the code:
code:
<img src="whatever.gif" width="150" height="300" name="picturechanger">
<a href="javascript: changeImage('another.gif')"><img src="another_thumb.gif"></a>
<script language="JavaScript1.1">
function changeImage(piclocation) {
document.images.picturechanger.src=piclocation
}
</script>
Its all pretty straightforward. Create your thumbnail images and reproduce the link as many times as you like and swap the image URL to the thumbnail and the changeImage() image to the main picture. As bitdamaged said in the above thread - leave out the height and width if the pictures are different sizes.
___________________
Emps
FAQs: Emperor
|
u-neek
Bipolar (III) Inmate
From: Berlin, Germany
Insane since: Jan 2001
|
posted 08-03-2002 19:09
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-07-2002 14:22
Everything work out for you, Mikey?
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-09-2002 21:05
actually i got halfway through coding it when i ran into a new handle of tequila, sorry.
i'll probably won't have a chance to try again until the middle of next week, sooo...
don't delete this thread please!
<3 mikey milker
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-11-2002 22:27
hey mobs i sent you an e-mail at your hotmail account with further nonsense.
cheers!
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-12-2002 18:08
okay kids... i've been messing around with mobrul's solution but haven't had complete luck. i can get the images to hide themselves, but they just won't appear when they should. this is a problem, heh.
http://www.zerominuszero.net/happy/ -- here's what i'm working with right now. i think something's wrong with the javascript, especially since when i run it through w3's validator it takes a big dump on my head.
am i perhaps calling the wrong document type in the header? have i defined my javascript as the right "type?" all i pretend to be decent at is taking photos, not this coding mumbo-jumbo... any help is greatly appreciated!
edit: it should be noted that when you click the first thumbnail a larger image should pop up to the right. at least that's what should happen... in ie6 a javascript error pops up and in ns6 nothing happens at all. the other three thumbnails have no "working" code attatched to them, just the first.
[This message has been edited by mikey milker (edited 08-12-2002).]
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-12-2002 18:22
check your email, brotha.
lines:
code:
document.getElementById(bgImg[i]).style.display = 'none';
and
document.getElementById(bgImg[x]).style.display = 'block';
(bgImg[x]) -- parenthisis on the outside, square brackets on the inside.
right now you have parenthisis in both places.
mobrul
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-12-2002 19:22
actually i tried that swapping in the brackets earlier and had no luck...
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-12-2002 19:37
I'm implementing something similar here and it works just fine.
I'm kinda frustrated.
Slime?
Anybody?
mobrul
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-12-2002 19:44
what's the difference between using " and ' in the coding?
yours seems to be working well so later on today i'll try to reverse-engineer it into my feeble attempt if i get some spare time.
cheers
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-12-2002 19:54
Most of the time, no difference except laziness -- not wanting to hit the Shift key.
Just make sure if you open with one kind, you close with the same kind.
When dealing with strings that actually contain one or the other it matters, but in this application either should be acceptable. (At least that's what I've always thought...)
mobrul
|
mobrul
Bipolar (III) Inmate
From:
Insane since: Aug 2000
|
posted 08-13-2002 14:25
I feel like such a jackass for not seeing it before.
make change() a function
and switch to the square brackets like I said earlier.
[This message has been edited by mobrul (edited 08-13-2002).]
|
mikey milker
Paranoid (IV) Mad Scientist
From:
Insane since: Apr 2000
|
posted 08-13-2002 19:21
yeah... that made just a slight difference, hahaha.
aces on the code, now i've got to work on the content and try to resurrect zmz from the dead.
|
Karl
Bipolar (III) Inmate
From: Phoenix
Insane since: Jul 2001
|
posted 08-28-2002 18:15
I love the Asylum : ) The subtle humors here ~cough~ Too Classic! (and nice script).
Err.... flowers are kinda sexy.
Karl
Karl www.AZProGolf.com
karl@azprogolf.com
|
Hugh
Paranoid (IV) Inmate
From: Dublin, Ireland
Insane since: Jul 2000
|
posted 08-29-2002 01:22
in a quiet wispery voice: what about frames ?
shh shh, oh jees I hope the frame haters didnt hear me.
aggh
|
Petskull
Maniac (V) Mad Scientist
From: 127 Halcyon Road, Marenia, Atlantis
Insane since: Aug 2000
|
posted 08-29-2002 10:10
*a shot rings out in the dark*
...and Hugh is dead.....
Code - CGI - links - DHTML - Javascript - Perl - programming - Magic - http://www.twistedport.com
ICQ: 67751342
|
WebShaman
Maniac (V) Mad Scientist
From: Happy Hunting Grounds...
Insane since: Mar 2001
|
posted 08-30-2002 07:14
Did somebody hear something? No? Ok, back to business as usual...who left this body laying around? Well, it's off to the Mad Scientists laboratory for you...hehe...maybe those organs can be of some use...
|
