Topic awaiting preservation: Dynamic image not text

Ok Im looking for a way to display an image on page by clicking on a link. Awile back I was working with image scripts and pop-ups for thumbnail galleries, but this won't look right for this. I have this page that has some links on it. When I click on the link I want an image to be inserted below the links. I know how to do this with text, but with an image how would I do that. I do not want a pop-up of the image.

I want the image to actually be inserted. Is there a way to insert html by clicking a link? Maybe something with the document write function?




[This message has been edited by Dark (edited 01-18-2002).]

The first thing that comes to mind is to do a document.write or innerHTML to a div on your page. You can write anything you want into it. I would make sure the image was pre-loaded so you didn't have to wait for it after the click.

But positioning and spacing can be an issue here though. Do you expect the "squeeze" the inserted pic into the content? If so then that might complicate things a bit. But if you have a place where the image will easily fit into the current layout then it's no problem at all.

In fact, if it's the latter case where there's already a space reserved for the image then why not just do an image swap function?

Let us know which way you're going with it and hopefully it will work out well.

Yeah I have a place right under the links where I want the images to go. I'm not sure what you mean by "squeeze" in the image.

I want the image to first appear only after clicking on the corsponding link.

I've actually seen this done before, but don't remeber where. I mean I would think it's sorta like inserting text on to a page by clicking a link sorta like docs page? Could you show me an example bugs of what you are thinking?





[This message has been edited by Dark (edited 01-16-2002).]

Bugs is suggesting the simplest way is to just use an image swap with a transparent gif and the image you want displayed. (If you already have the space).

Bugs is wondering if you need to shift content like so

mmmmmmmmmm

mmmmmmmmmm

mmmmmmmmmm

m   CLICK ME      m

mmmmmmmmmm

mmmmmmmmmm



------------------------



mmmmmmmmmm

mmmmmmmmmm

mmmmmmmmmm

m   CLICKED        m

m                        m

m                        m

m                        m

m                        m

m                        m

mmmmmmmmmm

mmmmmmmmmm

If you get the drift.
Actually this isn't too hard if you just use the CSS "display" property. Easier than using an innerhtml/doc.write method



:[ Computers let you make more mistakes faster than any other invention in human history, with the possible exceptions of handguns and tequila. ]:

[This message has been edited by bitdamaged (edited 01-16-2002).]

Is there a way to make the image floating? Cause I'm really starting to think that maybe the image should jsut be inserted and be able to be dragged and moved. That way I wouldn't have to rezise anything and worry about expanding the content or trying to make a space where everything will fit. Most of the images can go in one spot, but some of these are flyers and posters and alot of them have diffrent heights and widths which won't look right if I resize them. The image swap thing would be great for a thumbnail section or navigation. Sorry if I am changing ideas in mid stream on you. It's just that I was thinking on a one page deal, but I realized that I want this on all the pages and the content changes from page to page alot.







[This message has been edited by Dark (edited 01-17-2002).]

So, now you want an image to apear that you can drag around.

You know the easiest way to do that? Use a pop-up window!

Don't go trying to use DHTML just because it's cool. Often people use DHTML in very very uncool ways and it's downright annoying. Most people are fine with pop-up windows for images and the like. Infact, I'm quite fond of them.

I'd still prefer to use dhtml. I hate pop-ups even though I sometimes use them for this, but if I do I'll check out your script bugimus (The one that resizes to fit the image)

Hey bugimus I decided to use you script for right now, but I can't seem to find out what is not making it work. I didn't change "anything" in the code and it isn't working.

<html>

<head>

	<title>Untitled</title>



<meta name="description" content="This page will demonstrate some basic meta tags">

<meta name="keywords" content="meta tags,keywords,description,author">

<meta name="author" content="MissionData/">

	

<link REL="StyleSheet" TYPE="text/css" HREF="styles.css">

<script language="JavaScript">

/*

-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

	Written by Bugimus 

	Copyright ) 1998-2001 Bugimus, all rights reserved.

	You may use this code for your own *personal* use

provided you leave this comment block intact.  

	A link back to Bugimus' page would be much

appreciated.  

 [url=http://bugimus.com/]http://bugimus.com/[/url] 

=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-

*/



function showPic( imgName, imgCaption, imgWidth,

imgHeight, textColor, bgColor ) {

	if(imgWidth<=100)imgWidth=100

	if(imgHeight<=100)imgHeight=100

	winHeight=imgHeight+20;

	w =

window.open('','Demo','toolbar=no,location=no,directories=no,status=no,scrollbars=no,resizable=yes,copyhistory=no,width='+imgWidth+',height='+winHeight);

	w.document.write(

"<html><head><title>"+imgCaption+"</title>" );

	w.document.write( "<STYLE TYPE='text/css'>" );

	w.document.write( "A {font-family: verdana;

font-size: 10px; color: "+textColor+"; text-decoration

: none;}" );

	w.document.write( "A:Visited {font-family:

verdana;font-size: 10px; color: "+textColor+"; }" );

	w.document.write( "A:Active { font-family: verdana;

font-size: 10px; color: "+textColor+"; }" );

	w.document.write( "A:Hover { font-family: verdana;

font-size: 10px; color: "+textColor+"; }" );

	w.document.write( "IMG {border-color :

"+textColor+";}" );

	w.document.write( "BODY { font-family: verdana;

font-size : 10px; font-weight: normal; color :

"+textColor+"; background-color : "+bgColor+"; }" );

	w.document.write( "</STYLE>" );

	w.document.write( "<script

language='JavaScript'>\n");

	w.document.write( "IE5=NN4=NN6=false\n");

	w.document.write( "if(document.all)IE5=true\n");

	w.document.write( "else

if(document.layers)NN4=true\n");

	w.document.write( "else

if(document.getElementById)NN6=true\n");

	w.document.write( "function autoSize() {\n");

	w.document.write( "	if(IE5)

self.resizeTo(document.images[0].width+10,document.images[0].height+31+20)\n");

	w.document.write( "	else if(NN6)

self.sizeToContent()\n");

	w.document.write( "	else

top.window.resizeTo(document.images[0].width,document.images[0].height+20)\n");

	w.document.write( "	self.focus()\n");

	w.document.write( "}\n</scr");

	w.document.write( "ipt>\n");

	w.document.write( "</head><body leftmargin=0

topmargin=0 marginwidth=0 marginheight=0 onLoad=" );

	w.document.write( "'javascript:autoSize();'>" );

	w.document.write( "<table cellpadding=0 cellspacing=0

border=0><tr><td colspan=3><img src='"+imgName+"'

border=0 alt='"+imgCaption+"'></td></tr>" );

	w.document.write( "<tr><td

align='left'>  <a>©

Bugimus.com</a></td>" );

	w.document.write( "<td align='center'><a>(ctrl-p to

print)</a></td>" );

	w.document.write( "<td align='right'><a

href='javascript:top.window.close();'>close

window</a>  </td></tr>" );

	w.document.write( "</table></body></html>" );

	w.document.close();

}

</script>

 

 

</head>



<BODY bgcolor="#1f3147" TOPMARGIN="0" LEFTMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">



<a href="javascript:showPic('/preview/kriek.jpg','First

image, landscape',0,0,'#000000','#25262c')"><img

src="/preview/kriek.jpg" width="100" height="100"

border="1" alt="" hspace="20" vspace="20"></a>



</body>

</html>

EDIT: Oh shit does it have something to do with the CSS
That you have in your script and the style sheet on mine?




[This message has been edited by Dark (edited 01-17-2002).]

you want to click and have an image appear..
that is the display function.. look in google for CSS Display
there are lots of ways to do tricky things with that function...
have fun! I have an example on the page "To Shall" on my site
skyetyger.com/toshall.html

But I recommend studying the function in the tutorial sheets as there is a lot
you can do with this..

Dark,

I don't know what part isn't working but you might be using an outdated version of that code.

Use this one instead: http://bugimus.com/script/gallerypics.js

Then call it like this from your page:

<a href="javascript:showPic('gfx/yourimg.jpg','caption',600,400,'#660066','#CBB7CB');"><img src="gfx/yourimg_thn.jpg" width=75 height=50 alt="" border=1 vspace=5 hspace=5></a>

Still not working.
Im getting an unterminated string constant on line: 46 Char: 21
and a syntax error on line: 47 Char 2
Take a look at the page. It's not even showing up now.
http://angryblue.com/test2.html


Im not even seeing what's wrong....

[b]46:[/b] w.document.write( "</script>\n");

[b]47:[/b] w.document.write( "</head><body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onLoad=" );

[This message has been edited by Dark (edited 01-18-2002).]

It is better to call the js file with a link tag like this:

<script src="gallerypics.js"></script>

If you put the code on the same page then you need to do this for line 46:

w.document.write( "</scr");
w.document.write( "ipt>\n");

Don't ask why, but this fixes the problem. I guess I should have kept that little tweak in there, oops.

Cool, heh yeah you should have added that in.
Thanks for your time and help bugs =)




[This message has been edited by Dark (edited 01-19-2002).]