RSS Forums RSS
Please support our Site Layout and Usability advertiser: Internet Marketing Services
Views: 8138 | Replies: 10
Reply
Join Date: Nov 2004
Posts: 35
Reputation: croft is an unknown quantity at this point 
Rep Power: 5
Solved Threads: 0
croft's Avatar
croft croft is offline Offline
Light Poster

How do i load a image on the same page ?

  #1  
Mar 6th, 2005
I want to load an image on the same page.. Hmm

Check this site out and how the screenshots work and you know what i mean.
http://www.eve-online.com/screenshot...=24112004&n=10

I want t5o have small thumbnails belove a larger image. When i klick one of the smaller thumbnails i want it to load over them..

Im guessing some java script or something ?
I dont even butter my bread. I consider that cooking
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: How do i load a image on the same page ?

  #2  
Mar 7th, 2005
JS files...external....2......
1) x-core....cross platform browser JS.
2) minmax....makes IE accept the min/max height properties JS.

JS script....internal......lots....

the one you want.....(2 parts)

(part1_____the JS that does all the work!)
<script language="javascript">
function screenup(n){
screenow = window.open('/screenshots/up.asp?col=24112004&n='+n,'screenow','width=790,height=574,resizable=no,scrollbars=no,menubar=no,toolbar=no,directories=no,location=no,status=no');
}
function fcnDisplay(n){
xGetElementById('displayImg').src = '/screenshots/24112004/'+n+'n.jpg';
}
function EVE_preloadImages() {
var d=document; if(d.images){ if(!d.EVE_p) d.EVE_p=new Array();
var i,j=d.EVE_p.length,a=EVE_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.EVE_p[j]=new Image; d.EVE_p[j++].src=a[i];}}
}
document.onload = EVE_preloadImages('02n.jpg,03n.jpg,04n.jpg,05n.jpg,06n.jpg,07n.jpg,08n.jpg,09n.jpg,10n.jpg');
</script>

(part 2_____The code to call the JS... note the '##' for fcnDisplay + screenup !!!)
<td align="center"><a href="#sh" onclick="fcnDisplay('01')"><img src="24112004/01m.jpg" class="thumbs"></a><br><a href="#sh" onclick="screenup('01')"><img src="/bitmaps/img/fullscreen.gif" border="0"></a></td>


Is that any help ?

PLEASE NOTE...code is pasted as an example!
It is by no means meant asa breach of Copyright, nor to be copied.
Reply With Quote  
Join Date: Jul 2004
Location: Wales
Posts: 735
Reputation: DaveSW is on a distinguished road 
Rep Power: 6
Solved Threads: 17
DaveSW's Avatar
DaveSW DaveSW is offline Offline
Master Poster

Re: How do i load a image on the same page ?

  #3  
Mar 7th, 2005
or you can use my simple accessible iframe implementation
http://www.emdevelopments.co.uk/demo/iframe/

Replace the numbers with your pictures.
Reply With Quote  
Join Date: Apr 2004
Location: Tracy
Posts: 744
Reputation: Killer_Typo will become famous soon enough Killer_Typo will become famous soon enough 
Rep Power: 7
Solved Threads: 32
Killer_Typo's Avatar
Killer_Typo Killer_Typo is offline Offline
Master Poster

Re: How do i load a image on the same page ?

  #4  
Mar 15th, 2005
Originally Posted by croft
I want to load an image on the same page.. Hmm

Check this site out and how the screenshots work and you know what i mean.
http://www.eve-online.com/screenshot...=24112004&n=10

I want t5o have small thumbnails belove a larger image. When i klick one of the smaller thumbnails i want it to load over them..

Im guessing some java script or something ?

that would be javascript such as


<script language="javascript">
function ChangeImage1(){
	document.getElementById("image1").src= "location of the first thumbnail";
}
		</script>

will work.


so your code might be

<img src="location of image" id="image1"> <!--this is the main image that you want swapped with other images

and below it would be the images you want in thumb view

<img src="loaction of the thumbnail" onClick="ChangeImage1();">

or

<img src="location of the thumbnail" onmousover="ChangeImage1();">


this can easily be added to add more functions for more pictures

IE:
<script language="javascript">
function ChangeImage1(){
document.getElementById("image1").src= "location of the first thumbnail";
}
function ChangeImage2(){
document.getElementById("image1").src= "locatoin of the second thumbnail";
}
</script>

then for subsequent loads for different images you would do

<img src="location of the image" onmouseover or onclick ="changeimageX();>

where X is the number of the corresponding thumbnail.

if thats confusing i can give you some sample code i have at home to look at.

I currently dont have any on me as i am at school.
!!!!! WARNING YOUR COMPUTER MAY BE INFECTED WITH SPYWARE!!!! PAY AN OVER PRICED AMMOUNT TO HAVE SOMTHING FIXED WE PLACED THERE IN THE FIRST PLACE!!!!!!!!!

sound familiar, know how to block yourself and keep yourself clean.
_____________________
http://www.lavasoftusa.com/ -->adaware
http://www.safer-networking.org/en/index.html -->spybot S&D
http://www.javacoolsoftware.com/spywareblaster.html -->spywareblaster
http://www.javacoolsoftware.com/spywareguard.html -->spywareguard
_____________________
and dont forget to spread the reputation to those that deserve!
Reply With Quote  
Join Date: Jun 2005
Posts: 1
Reputation: Nightjar is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
Nightjar Nightjar is offline Offline
Newbie Poster

Re: How do i load a image on the same page ?

  #5  
Jun 29th, 2005
Originally Posted by Killer_Typo
this can easily be added to add more functions for more pictures
I followed this thread and I believe there is just a tiny bit to add to the script to let me do what I'm trying to do.
http://www.cartabianca.com/test/progetto-web.gif
Basically, I'd like to click on one of the yellow buttons at the bottom to load a new image on the grey area. The button should also change into red, so to let people know which of the available images is being displayed.

Any help would be greatly appreciated!
Reply With Quote  
Join Date: Feb 2007
Posts: 3
Reputation: korigirl is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
korigirl korigirl is offline Offline
Newbie Poster

Re: How do i load a image on the same page ?

  #6  
Feb 14th, 2007
Originally Posted by Killer_Typo View Post
that would be javascript such as


<script language="javascript">
function ChangeImage1(){
    document.getElementById("image1").src= "location of the first thumbnail";
}
        </script>

will work.


so your code might be

<img src="location of image" id="image1"> <!--this is the main image that you want swapped with other images

and below it would be the images you want in thumb view

<img src="loaction of the thumbnail" onClick="ChangeImage1();">

or

<img src="location of the thumbnail" onmousover="ChangeImage1();">


this can easily be added to add more functions for more pictures

IE:
<script language="javascript">
function ChangeImage1(){
document.getElementById("image1").src= "location of the first thumbnail";
}
function ChangeImage2(){
document.getElementById("image1").src= "locatoin of the second thumbnail";
}
</script>

then for subsequent loads for different images you would do

<img src="location of the image" onmouseover or onclick ="changeimageX();>

where X is the number of the corresponding thumbnail.

if thats confusing i can give you some sample code i have at home to look at.

I currently dont have any on me as i am at school.


this actually is a bit confusing. can you show me an example please?
Reply With Quote  
Join Date: Jan 2007
Posts: 2,640
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 118
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: How do i load a image on the same page ?

  #7  
Apr 28th, 2007
Why bother with that?

Just make identical pages, with the color changes and the large picture coded differently, and with links to each other.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Feb 2007
Posts: 3
Reputation: korigirl is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
korigirl korigirl is offline Offline
Newbie Poster

Re: How do i load a image on the same page ?

  #8  
Apr 28th, 2007
Originally Posted by MidiMagic View Post
Why bother with that?

Just make identical pages, with the color changes and the large picture coded differently, and with links to each other.

well I'm not sure exactly what you're talking about but I have a LOT of pictures to show (http://www.korigirl.com). Its my photography.
Reply With Quote  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: How do i load a image on the same page ?

  #9  
Apr 29th, 2007
Ok....This thread is almost 2 years out folks.


...Korigirl...
So you want to generate some sort of smart, clever, pretty gallery?
It's actually easier than you think - and for most things you can use CSS instead of JavaScript.
That said, do try to consider things such as Accessibility.
If you would like assistance, just PM or post here.


...MildMagic... Not particularly helpful? If I ask for directiosn to a library, what you gonna do, tell me to go to a books store and buy one instead ?
Not repremanding you (hell, I'm hardly ever here now adays), but please think first, type second.
Reply With Quote  
Join Date: Feb 2007
Posts: 3
Reputation: korigirl is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
korigirl korigirl is offline Offline
Newbie Poster

Re: How do i load a image on the same page ?

  #10  
Apr 29th, 2007
Thanks for offering but i think i'm happy with what I have right now.
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

Thread Tools Display Modes
Forums | Blogs | Tutorials | Code Snippets | Whitepapers | RSS Feeds | Advertising
All times are GMT -4. The time now is 3:18 am.
Newsletter Archive - Sitemap - Privacy Statement - Acceptable Use Policy - Contact Us
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC