|
HTML - Showing Full Size Jpg From Thumbnail
I have a thumbnail jpg on my main page and would like to display the full size jpg on a separate page when the thumbnail is clicked. I know, a total newbie thing, but you know how to do it and I don't! A simple example would be much appreciated.
Similar TutorialsI'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background http://img236.imageshack.us/img236/4...dexbackcu3.jpg and then add menus and text content. any tips? thanks! jdawest Hi: This is probably a silly trivial question but I can't seem to find the answer in my books ('Beginning Web Programming with HTML,XHTML. and CSS' by Jon Duckett, and 'Javascript - The Definitive Guide (5th Edition) by David Flanagan): How do I ensure that my client's browser window is set to 'Full Screen' when loading is complete ?? (btw, my current page looks confusing if the client's browser window is much less than full size ) I hope there is something llike: onload window.size := 'fullscreen' )) Thanks for any hints - and for any pointers in my books above where I can read up properly on this) -Mel Smith Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe Below is code that works fine, but I wonder if someone could help so that it opens in a full size window so that they don't have to resize the pop up. Thank you. <p><frameset frameborder="0" rows="10%,*"></frameset><frame src="menu.html"></frame><frame name="frame"></frame>Adjust the percentage to give your frames the right height. The first frame is pointing at your menu so here is menu.html :</p> <table align="center"> <tbody> <tr> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 1</option> <option value="" selected="selected">Drop down 1</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 2</option> <option value="" selected="selected">Drop down 2</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 3</option> <option value="" selected="selected">Drop down 3</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 4</option> <option value="" selected="selected">Drop down 4</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> </tr> </tbody> </table> <table> <script language=Javascript> function change(select) { if( select.options[ select.selectedIndex].value) { select.form.action = select.options[ select.selectedIndex].value; select.form.submit(); } } </script> <tbody> </tbody> </table> i have 2 frames in my parent frame say 1.htm ie left frame and 2.htm ie right frame now this 1.htm is quite a long frame and has a scrollbar and 2.htm is a short one i dont the scroll bar beside my frame 1 but want it to be for my entire parent window ie i wont to scroll both my left and right frames together how do i do that Hi! I have a page that contains a text area. What I want it to do is to change its size according to the size of the browser window. How can I make it do that? I did it once but just can't seem to remember how I did it. Thanks All: Working to update a previously designed website. Original design uses an <img> tag to create a top banner and another <img> tag to create a side banner. In each case there are mapped coordinates on each banner as links for the subsequent pages. Basic page design is as follows: Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td>
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<div>
***PAGE CONTENT***
</div>
<tr>
<table>
The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages to be much longer or shorter than others. This causes some inconsistencey in the relationship between the side banners height and the page content. In other words in some cases the banner is exceptionally longer than the page content and the reader must scroll past significant "dead-space" before being brought to the lowest mapped links in the side banner; or... ...in some cases the side banner is significantly shorter than the page content causing the banner image to appear "poorly-fit" to the page design. I considered altering the 2nd table instance in the above design so that the banner is carried in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the image to size relative to the <td> tag carring the content.... Code: <table>
<tr>
<td>
<img usemap="Map1">
<map name="Map1">
<area>
<area>
<area>
</map>
</td>
</tr>
</table>
<table>
<tr>
<td size="100%">
<img name="Map2">
<map>
<area>
<area>
<area>
</map>
</td>
<td size="100%" >
<table>
***PAGE CONTENT***
</table>
</td>
<tr>
<table>
The problem I've found with this is that as the content size causes the image to "flex", either readablilty or image quality or both are effected, AND the mappings become inconsistent as the image coordinates constantly change. I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there are better ideas I'm overlooking. One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a "defalut" page size that would never be smaller than a standard for the side banner. Problem: larger page sizes are still a problem as are the changing map coordinates My other idea was to return to the original page design listed first above and again settle on a standard side banner "height"... ...any page that was significantly longer than that height would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to the additional content. Problem: ...possible complications splitting content... Benefit: ...consistent page design that allows a consistent side banner with navigable links... Question for the group: Does this sound reasonable? Are there better alternatives I am overlooking? THANKS IN ADVANCE FOR ALL INPUT!! Im creating a web gallery, and it deals with iFrames. So I have 2 iFrames in the page 1 iFrame shows the thumbnails. the second iFrame shows the full picture. So the thumbnail one I decided to go horizontally this time and not vertically like I usually do. Now the problem is I have the thumbnail iFrame a certain length. It hold visibly 5 80px thumbnails. If I add any more thumbnails is puts the extra thumbnails below the first 5. Which I don't want, I want all the thumbnails to be on one line even if I have like 20 thumbnails. how can I do this? thx for your help Hi guys. I'm not very familiar with HTML at all, but I have just created a new blog on blogspot. I created a new "page" to make a gallery and I wanted to add my gallery as a simple HTML thumbnail thingie. I mean lots of thumbnails with a short description below the picture that allowed me to write like "Photoshoot 5/1-2012" or something like that. I made this code to make a thumbnail that when you click on it, the picture gets the original size, but would it be possible just by HTML coding to make the thumbnail go into a slideshow of pictures from that shoot without making it go to an external page? HTML Code: <a href="http://www.supercoloring.com/wp-content/thumbnail/2009_01/t-coloring-page.gif"> <img height="150" src="http://www.supercoloring.com/wp-content/thumbnail/2009_01/t-coloring-page.gif" width="150" /></a> If anyone got another idea that would work for me I'd love it. I don't know if I'm allowed to post my page but it's kenmoe . blogspot . com, I can delete it if it's not allowed, but it's a sub page next to "Blog" where I'd love a gallery that still looks nice and keeps the user on my page. Have a happy new year everyone! I'm looking for the coding to make a small (ex:100x100) picture to its NORMAL size i've found others that like when you click it it doubles it. not really what i want I want it so when you click on an image, a popup will appear with the regular size of an image. I'll even pic the sizes in manually if i have to (was suposed to be HOW to..not hot to lol my bad) Hello I have a webpage but I want to make this - when people click on the thumbnail of a photo, then the larger version of the photo will be shown up like that of the facebook and visitors can comment on the photo anonymously (I don't need an account system in my webpage) But that's all, I don't need anything as complicated as facebook e.g "like" buttom or anything else How to write this code? will it be very difficult to make it? Thank you. Hello, I am making a squad list for my football team and i have created a table containing all the information; squad number, name , position etc. In the last column i want to have it so there is a blank field or a field with a ver small thumbnail in and when the cursor hovers over this an image appears, but only whilst the cursor is over that small part. hope this make sense Is there a html code for a thumbnail that makes the target image return to the thumb when it is clicked without it being in its own html document? Let me set up what my site looks like first, then I'll delve into the question. My site has frames, top frame, left frame, and a main frame. The left frame contains numerous thumbnail images that I want the user to click on and get a larger version of said image inside the main frame. The problem I'm having is I have to create a separate html page for each (larger)image (and it has become incredibly tedious), instead of just having a main.html with some sort of way of opening multiple (not more then one image at a time, but have an image replace the previous one when a new thumbnail is clicked) images inside of it. How can I do this? Would I use a div or what? I'm just learning so any help would be great. If I haven't explained well enough, I'll be happy to restate the question if you wish. Please help ! ) I have designed my band's myspace page (http://www.myspace.com/blindthecarrier) with custom header's and title blocks. About and members are currently the only sections with title blocks, but I would like to add a new html box with my top friends in it and remove the default friends box. I viewed the source code and now have everything working except the friend thumbnail pictures. Any ideas on how to retrieve profile picture thumbnails from someones profile? I need to create a link that will bring up a page that shows nothing but the <body> of the page, with no menu bars, status bars etc. I have an old page created with FrontPage years ago that does it perfectly, nothing from the browser shows at all, not menu, status scroll, etc shows. However, on my new fancy Joomla 1.5.10 site I cannot get it to work... even with the same code pasted in from the old site. I cannot get it not to display the menu and status bars when I try it on my Joomla site.. This is the code from the old site: <a href="BlackPage.htm"> <img border="0" src="luscher%20black%202.jpg" lowsrc="luscher%20black%202.jpg" width="100" height="71"></a> It even has a bunch of garbage in it and it works perfectly. Why can't I get the same thing to work on my Joomla site? Thanks Larry I'm making a small little template for just messing around matching colours, and i've tried putting a vertical navigation bar on the left. I have the div with a <ul> inside of it, but it's not taking up the full width of the div. It's taking up 75% of the div. Does anybody have any answers for it happening? I have posted my code below. HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
body {
background-color: #6698FF;
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #4E5869;
margin: 0;
padding: 0;
color: #000;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="header"></div>
<div id="sidebar1">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Link two</a></li>
<li><a href="#">Link three</a></li>
<li><a href="#">Link four</a></li>
</ul>
</div>
<div id="content">dfgfdgdfg</div>
<div id="sidebar2">sgdsgdfg</div>
</div>
</div>
</body>
</html>
HTML Code: #wrap {
width: 1050px;
margin: 0px auto;
}
ul.nav {
list-style: none;
border-top: 1px solid #666;
}
ul.nav li {
border-bottom: 1px solid #666;
}
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
text-decoration: none;
background: #8090AB;
color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
background: #6F7D94;
color: #FFF;
}
#container{
width:800px;
min-height:700px;
margin-left:auto;
margin-right:auto;
background-color:#5CB3FF;
}
#header{
}
#sidebar1{
width:20%;
float:left;
background-color:#A0CFEC;
}
#content{
width:60%;
float:left;
background-color:#FFFFFF;
}
#sidebar2{
width:20%;
float:left;
background-color:#A0CFEC;
}
|
|||||||