Closed Thread Icon

Topic awaiting preservation: Dynamic image not text Pages that link to <a href="https://ozoneasylum.com/backlink?for=8034" title="Pages that link to Topic awaiting preservation: Dynamic image not text" rel="nofollow" >Topic awaiting preservation: Dynamic image not text\

 
Author Thread
Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-16-2002 22:28

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).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 01-16-2002 23:12

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.

Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-16-2002 23:23

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).]

bitdamaged
Maniac (V) Mad Scientist

From: 100101010011 <-- right about here
Insane since: Mar 2000

posted posted 01-16-2002 23:42

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

code:
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).]

Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-16-2002 23:53

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).]

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 01-17-2002 09:46

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.

Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-17-2002 15:00

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)

Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-17-2002 17:09

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.

code:
<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).]

skyetyger
Bipolar (III) Inmate

From: midair
Insane since: Jul 2001

posted posted 01-17-2002 18:40

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..

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 01-17-2002 20:18

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>

Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-18-2002 20:24

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....

code:
[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).]

Bugimus
Maniac (V) Mad Scientist

From: New California
Insane since: Mar 2000

posted posted 01-19-2002 02:30

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.


Dark
Neurotic (0) Inmate
Newly admitted
posted posted 01-19-2002 05:48

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).]

« BackwardsOnwards »

Show Forum Drop Down Menu