|
HTML - Enlarge Captions
Hi there,
for my website I would like to have small images, but when clicked on, enlarge in the current window, not another window, and does not link to a blank page with the picture. I don't know if HTML can do this or not, what would be my best option? I don't think wordpress supports javascript either? Thanks, ps2cho Similar TutorialsHello, I am developing a website and am not very experienced. I am trying to figure out how to enlarge an image over the background. Like make the image bigger in the same window and the background gray. Can anyone help me? I have a lot of images I want to put on a page. I have no trouble sizing them, and lining them up as I want. I am however having big-time trouble getting captions under them. Is there somewayt to do this either in html or CSS? Including a sample. Want to take the alt text and change to caption, centered under each photo. Anyhelp would be appreciated. <html> <head> <title>In The Field</title> </head> <style type="text/css"> img {border: 4px solid black; float: center; padding: 40px; margin: 40px; font-family: "GC Times": color: white; body{font-family: Verdana; impress;} h1 {font-size: 25;} h2 {font-size: 35;} h3 {font-size: 30;} p {text-indent: 3em;} text {font-weight: bold;} } </style> <body leftmargin="100" rightmargin="50"> <body bgcolor="#FFA07A"> <hr color="black"> <h1 align="center"><font color="black" font size="45">"A Few Photos"</h1> <hr color="black"> <br> <h1 align="left"><font color="tan" font size="5"></h1> <a href="thumbs/Auto.jpg"><img src="images/AutoGiveaway.jpg" width="375" height="265" border="0" alt="Harry Bodofsky, FMDAC VP giving the keys to the lucky winner at Treasure Weekend, 1985"></a> <a href="thumbs/DickandJimmythumb.jpg"><img src="images/DickandJimmy.jpg" width="375" height="265" border="0" alt="Dick Tichian & Jimmy Normandi"></a> <a href="thumbs/GarrettAChunt.jpg"><img src="images/GarrettAChunt.jpg" width="375" height="265" border="0" alt="Charles Garrett signaling the start of the hunt"></a> <a href="thumbs/Fisherthumb.jpg"><img src="images/Fisher.jpg" width="375" height="265" border="0" alt="The Fisher crew, Scott Warner, Me, Jim Lewellen & Fred Brust/Atlantic City 1985"></a> <a href="thumbs/GarrettSemingarthumb.jpg"><img src="images/GarrettSeminar.jpg" width="375" height="265" border="0" alt="Charles Garrett's Seminar, Atlantic City"></a> <a href="thumbs/FMDACHunt.jpg"><img src="images/FMDACHunt.jpg" width="375" height="265" border="0" alt="Jack Lowry, Alan Holcombe, Dick Stout & Gary Bischke, Atlantic City 1986"></a> 7<a href="thumbs/CharlesDickAlanthumb.jpg"><img src="images/CharlesDickAlan.jpg" width="375" height="265" border="0" alt="Charles Garrett, Dick Stout & Alan Holcombe, Atlantic city, 1985"></a> <a href="thumbs/Longleathumb.jpg"><img src="images/Longleat.jpg" width="375" height="265" border="0" alt="First formal meeting of the World Council, Longleat Castle, England 1986"></a> <a href="thumbs/Unloadingthumb.jpg"><img src="images/Unloading.jpg" width="375" height="265" border="0" alt="Cliff Steffens & Ed Laub unloading the coins for the first Atlantic City Hunt"></a> <a href="thumbs/weekendcrowdthumb.jpg"><img src="images/weekendcrowd.jpg" width="375" height="265" border="0" alt="A beautiful day in Atlantic City"></a> <a href="thumbs/FMDACoffic Any help would be appreciated. hello, i am just learning html and creating my own website right now. i ran into a problem and would like some help. what i want to do is this. i created a page with pictures about 200x200 in size. now what i want to do is when you "click" onto the picture have it open up in a new window and a Larger size. But there is more. I would like to have the new window have my page Banner on top and my background Color around the image. I already know how to use a code that Will enlarge the image in a New window but that is all it is is just the image and plain white background. and not what i want to do. So what are my options for the easiest method to do what i am thinking of above. Any help is appreciated. Hi everyone. I need some help with one thing. However as it is for an ebay page, I cannot use the head tag. I have seen it on ebay before so I know it can be done just not sure how. Basically I need a table with a row of thumbnail images at the bottom and in the top of the table, there will be an enlarged image. When an thumbnail is either clicked on, or the mouse is placed over he image, a bigger image will be displayed in the top cell. I cannot use anything in the head tag though as its ebay, like css or javascript Thanks for any help received Hi all i need some help. I have created a simple gallery with a large image and smaller images to the left of it, when the small images are clicked they change to the large image, see an example here http://vfashion.co.uk/help/example.html but i want to be able to add a link below the main image so when its clicked the current image that is displaying large will open up in a new window. how would i do this??? the code for the page is below please can someone help me Code: <head>
<meta content="en-gb" http-equiv="Content-Language">
<style type="text/css">
.auto-style1 {
margin-bottom: 0px;
}
</style>
</head>
<TABLE id=table1 height=164 cellSpacing=0 cellPadding=0 width=605 border=0 class="auto-style1">
<TR>
<TD vAlign=top width=603 colSpan=2 height=20><B><FONT face=Arial color=#333333></FONT></B></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
<DIV align=center>
<TABLE id=table2 cellSpacing=0 cellPadding=0 width=147 border=0>
<TBODY>
<TR>
<TD height=10></TD></TR>
<TR>
</TR>
<TR>
<TD height=5><div align="center">
<table border="0" width="147" cellspacing="0" cellpadding="0" id="table23">
<tr>
<td align="center" colspan="2" height="10"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="1.jpg" width=70 border=1 onclick=document.url.src="1.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="2.jpg" width=70 border=1 onclick=document.url.src="2.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="3.jpg" width=70 border=1 onclick=document.url.src="3.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="4.jpg" width=70 border=1 onclick=document.url.src="4.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
<tr>
<td align="center"></td>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<img style="border-color: cccccc" alt="" src="5.jpg" width=70 border=1 onclick=document.url.src="5.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
<td align="center">
<img style="border-color: cccccc" alt="" src="6.jpg" width=70 border=1 onclick=document.url.src="6.jpg" onmouseover=this.style.cursor=hand onmouseout=this.style.cursor=pointer /></td>
</tr>
</table></TD></TR></TBODY></TABLE></DIV></TD>
<TD vAlign=top width=405 height=40 rowSpan=3>
<P align=center>
<img src="1.jpg" alt="" name="url" width="380" border="0" id="url"></P>
<P align=center>
Click to enlarge</P></TD></TR>
<TR>
<TD vAlign=top height=106 style="width: 200px">
</TD>
</TR>
Hi, I'm hoping someone can help me. I bought a website template and I thought I would be able to figure it out. I'm having a lot of difficulty in a lot of areas. But this particular issue is driving me crazy. I only have some basic HTML knowledge. I'm basically trying to make images on my site so when you click on them they enlarge. When you click on them again and they shrink back down. First of all, this is the template I used: http://www.templatemonster.com/flash...tes/24691.html And this is what I'm specifically trying to add to it: http://www.cabel.name/2008/02/fancyzoom-10.html Scroll down and click on the sample images. I followed the simple instructions on that page above but where it says Body ID=, I'm not sure what I'm supposed to put there. Also the image source code in the instructions is different then the code in my .xml file. My code looks like <image imageUrl="_home_images-1.jpg"/> I've literally spent the whole day on this trying to figure it out and searching online. If anyone can show me how this can be done I would REALLY appreciate it. I'm not sure what other info you need, but I could zip up the template and provide it if needed. (its only 5mb) Thanks in advance Sarah I'm sorry I can't provide a url because I'm not online yet, but here is my problem. I am trying to post a series of images with text descriptions of each image, but I can't seem to align the images so they are spaced evenly. (Basically like tabs in between the photos) I have tried the following things: <img src="party23.jpg" width="150" height="150" hspace=50>Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> what I got was the pictures separated from the text - and the next picture's placement spaced from the end of the 1st picture's text, instead of from the first picture. I have also tried this: <img src="party23.jpg" width="150" height="150">Blowing out candles <center><img src="party24.jpg" width="150" height="150">The cake</center><br> what I got was the first picture & text was fine but the 2nd was centered on a new line instead of to the right of the first picture. Then I tried: <img src="party23.jpg" width="150" height="150">Blowing out candles <img src="party24.jpg" width="150" height="150">The cake<br> I might be able to get this to work...but I would have to count the spaces from the end of each text until the space where the photo needs to go so I know how many  's to insert.. and since all the text captions are different, that would be really time-consuming since there are alot of photos. Anyone able to help me find an easier way?? Any help greatly appreciated!! The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. |
|||||||