Onclick help ....
Hope this is the right place for this post, and thanks for any help in advance.
I downloaded a template that uses CSS and HTML that I'm trying to ammend, i do have dreamweaver but am finding it difficult.
My goal is to display 3 thumbnails that when any one of them is clicked opens a smaller window with a full size image of the selected thumb.
You will see from the example below i tried to impliment an onclick which kind of worked but had no close option and looked wrong despite me having the correct dimentions for each image.The image displayed a plus option to zoom in once the popup had opend which looked wrong untill you zoomed in with the pointer / plus.
Hope ive asked this question correctly, please bare with me (noob)
Here is the code i have thus far:CSS
body {
margin: 20px 0;
padding: 0;
background: #FFFFFF url(images/img1.gif);
font: normal small Arial, Helvetica, sans-serif;
color: #797979;
}
h1, h2, h3 {
margin-top: 0;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;
font-style: italic;
color: #000000;
}
h2 {
letter-spacing: -1px;
font-size: 2em;
}
h3 {
font-size: 1.2em;
margin: 0;
}
p, ul, ol, blockquote {
margin-top: 0;
}
a:link {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: underline;
}
li {
color: #000000;
}
li a:link {
border-bottom: 1px dotted #000000;
color: #666666;
}
li a:hover {
border-bottom: 1px solid #000000;
text-decoration: none;
color: #000000;
}
img.float {
float: left;
margin: 5px 15px 10px 0;
border: 5px solid #000000;
}
/* Header */
#header {
width: 700px;
height: 160px;
margin: 0 auto;
padding: 10px;
background: #797979 url(images/img3.jpg) no-repeat 10px 10px;
}
#header * {
margin: 0;
padding: 0;
float: left;
text-decoration: none;
font-size: 18px;
font-style: italic;
color: #FFFFFF;
}
#header h1 {
padding: 128px 0 0 18px;
font-weight: bold;
}
#header h2 {
padding: 128px 0 0 0;
}
/* Content */
#content {
width: 700px;
margin: 0 auto;
background: #FFFFFF url(images/img2.gif) repeat-x;
border: 10px solid #797979;
border-top: none;
}
#colOne {
float: left;
width: 180px;
padding: 20px 10px;
border-right: 1px dotted #797979;
}
#colOne ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
#colTwo {
float: left;
width: 280px;
padding: 20px 10px;
}
#colThree {
float: left;
width: 180px;
padding: 20px 10px;
}
#colThree ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
#colPro {
float: left;
width: 450px;
padding: 20px 10px;
}
#colPro ul {
margin-left: 0;
padding-left: 1em;
list-style: square inside;
}
/* Footer */
#footer {
padding: 14px;
text-align: center;
font-size: 12px;
}
#footer * {
color: #ffffff;
}----------------------------------------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>TEST</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="default.css" rel="stylesheet" type="text/css" />
<link href="templates/auto/2/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<h1><a href="#">TEST</a></h1>
</div>
<div id="content">
<div id="colOne">
<h2>Menu</h2>
<ul>
<li><a href="#" accesskey="1" title="">Home</a></li>
<li><a href="#" accesskey="2" title="">Services </a></li>
<li><a href="#" accesskey="3" title="">Products</a></li>
<li><a href="#" accesskey="4" title="">About Us</a></li>
<li><a href="#" accesskey="5" title="">Contact Us</a></li>
</ul>
<h2>Blah blah blah</h2>
<h3>blah blah blah</h3>
<p>blah blah blah blah blah blah blah blah<a href="#">More…</a></p>
<h3>Blah blah blah</h3>
<p>blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah <a href="#">More…</a></p>
<h3>blah blah blah blah blah blah blah blah</h3>
<p>blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah<a href="#">More…</a></p>
<h3>blah blah</h3>
<p>blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah. <a href="#">More…</a></p>
</div>
<div id="colPro">
<h2 align="center">blah blah</h2>
<div align="center"><a href="#" onClick="window.open('test.jpg','','width=360,height=600','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
<p>blah blah blah blah blah blah blah blahblah blah blah blah blah blah blah blah</p>
</div>
</body>
</html>Thanks again in advance.
arggghhh the html has displayed as in a browzer :S ?
JeevesBond posted this at 19:27 — 11th November 2008.
He has: 3,956 posts
Joined: Jun 2002
We allow HTML on the forum, so people can format their posts and that. If you need to post HTML/CSS just put it inside
<code>tags. Don't worry about getting it wrong, we can always fix it.As for your problem, try changing your onclick code to:
<a href="#" onClick="window.open('test.jpg','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a>The problem is the window is being set to the size of the image, but with the window border, scrollbars, and location bar the area the image appears in is smaller than the image itself. So, most browsers will scale the image down, giving you the + until you click the image.
So what I did to your code above is add 20px to the width and height of the window. You might need to add more if the problem continues. I also switched off the status bar -- at the bottom -- and the scrollbars, to save a little space.
Think of it like this: what you're setting is the width/height of the window's outer edges. Then the edges, location bar etc. have to be added on.
a Padded Cell our articles site!
Kim01 posted this at 19:34 — 11th November 2008.
They have: 15 posts
Joined: Nov 2008
Ah thank you Jeeves, i will impliment it later as I'm busy at the moment, but I'll be sure to post back here if i have any issues.
Really appreciate your help.
Does the rest of my code seem ok ? I just insert that code for every thumb i want to expand ? I want three so three times that code one for each thumb inside the div tag ?
Kim01 posted this at 20:59 — 11th November 2008.
They have: 15 posts
Joined: Nov 2008
Oh dear the code you replied with has vanished Jeeves ? The post is still there but code has gone.
All i see now is a scroll bar and no code ?
JeevesBond posted this at 21:08 — 11th November 2008.
He has: 3,956 posts
Joined: Jun 2002
Is that better? What browser are you using?
Kim01 posted this at 21:11 — 11th November 2008.
They have: 15 posts
Joined: Nov 2008
Yes perfect!! IE 7 ...
Thank you again Jeeves.
Kim01 posted this at 21:58 — 11th November 2008.
They have: 15 posts
Joined: Nov 2008
Ok all works great ...Any idea how i put a close button or link in with that ?
JeevesBond posted this at 22:34 — 11th November 2008.
He has: 3,956 posts
Joined: Jun 2002
IE is pants.
You should discover the greatness of Firefox + Firebug, or Opera + Dragonfly.
As you get into Web design you'll soon learn to hate Internet Explorer, it does many things slightly differently to all other browsers. Anyway, that's another topic.
That's a little more difficult than just opening a new window. You have a few options:
<a href="#" onClick="window.open('imageviewer.php?img=test.jpg','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a><a href="#" onClick="window.open('test.html','','width=380,height=620,status=0,scrollbars=0','screenx=300','screeny=200')"><img src="test.jpg" alt="img-01" width="120" height="200" class="thumb" style="display:inline"></a>Then put the image and a close link intotest.htmlFrankly though, particularly since you're just starting out, you don't need to bother. The window already has a close button on the top-right, there's no need to duplicate that.
a Padded Cell our articles site!
Kim01 posted this at 22:59 — 11th November 2008.
They have: 15 posts
Joined: Nov 2008
I'm going to take your advice and leave it as it is.
Thanks again Jeeves you have been most helpfull.
citymaniac posted this at 17:14 — 25th November 2008.
They have: 3 posts
Joined: Nov 2008
thanks kim and jeeves.
very helpful.
best
Mr City
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.