|
HTML - Help With Image Enlarge New Page
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. 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? 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 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 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 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. the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Hi, I have a problem which I can't seem to sort out at all. When I add an image to a website page which I am trying to create the page shifts about half a centimetre to the left. The page can't be getting wider, as the grey fading off sections on the left and the right are one image (which is around 800x1 pixel in size), so things such as the blue navigation bar would start to overlap the grey image if it was doing that. All the other (so far blank) pages on the website all stay in the same place. I just think it looks bad when you are browsing when the page shifts - especially if more pictures end up on further pages, and so every time you click onto a new page it shifts to a new area of the screen! Has anyone else had this problem before and know any way of resolving it? Kind Regards. Matt let me start a new page please, can I position an image anywhere I feel like on a page please? I use divs but is there a way to this with divs and without divs or with or without CSS? I recently created a wordpress blog but I would like the visitors to come to a landing page before they reach the blog. This is the type of landing page I am looking for: http://creativetime.org/index.php - An image - The title of our site. When you click on it, you enter the blog - Credits at the bottom of the image. I have basic html knowledge. I browsed html tutorials but don't seem to find a solution. Any ideas? Thank you. Hi guys, Ive got an html page, and need to run a banner like image right over the whole page. Is this possible? What kind of code would I need? looking forward to your reply. B Hi Team, I placed this html code into my web editor by first uploading and saving the image as a .png file. Here is the code I used: <a href="http://www.awin1.com/cread.php?awinmid=2208&awinaffid=107642&clickref=&p=http%3A%2F%2Fwww.1staudiovisual.co.uk%2Fcatalog% 2Fsamsung-ue46b7020ww-inch-p-7066.html"><img src="1stAudioVisual.png" alt="IstAudioVisual.png" title="Samsung UE46B7020WW" /></a> As you can see I put the img src in the same way that I saved it in my files..When I go to the page it comes up without the image and just says what's written in the alt section How do I get the image to show up? Thanks. Sunil. So my question is simple and easy. I already have knowledge of how to make a image link you to a web page. but I recently found the need to make a image link you to a webpage but not in a new window (what I mean is not open up a new browser window or tab when the image link is clicked.) how do I do this? I would like to know how to add a link direct to an image page. For an instance, if we know there is a pic : http://www.htmlforums.com/images/smilies/SmileBulb.gif I am just going to give link in any other site or in my site, I want to have a background ads, i.e like we have index.html page, is it possible to have some manual added code on pic embedded page. Just the image must show on, if it is direct linked & the image must show with any manual code or ads attached ? Is this feature possible ? Hello, I'm experiencing a small but annoying problem. My html form works fine when the submit button is an "ugly grey button" (input type=button), but when I try changing the button to show a nice jpg (input type=image) the form still submits ok, but the page always jumps to the top. This is annoying, because people should be able to scroll down through the page, click the button, and continue scrolling down to the next button. Many thanks in advance for any helpful explanations or hints! Simon Below is my code: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>One Nice Day</title> </head> <body> <div style="margin:5% 15% 0 15%;border:1px solid black;"> <img style="border:1px solid green" src="http://www.oneniceday.com/Artwork/Notice.gif" alt="[One Nice Day] now contains nudity : photographs and drawings of nude men and women, of which I will be posting on this site solely for the purpose of learning figurative art, in which I am using them as learning references / aids. If you are offended by such images, please click the Back button on your browser." /> </div><br /><br /> <div style="margin:1% 15% 0 15%;font:14pt 'Trebuchet MS',Arial,sans-serif;text-align:center;"> <a href="http://www.oneniceday.com/wordpress/" style="font-weight:bold;">ENTER</a> </div> </body> </html> When I view my web page, the <div> doesn't shrink to fit the size of the image, and there's a huge gap next to the image. U can see the result at www.oneniceday.com How do I center my image horizontally on the page? Thanks! Hope someone can help me please... I'm trying to find the best way to place an image slideshow (continual loop, no stopping etc) on my home page. I've tried a few what look like good JavaScript versions, which I cannot get to work properly - seem to conflict with other JavaScripts running on the same page. Does anyone have any ideas? Or is there a way to do this without using JavaScript (or Flash)? I'm using Joomla CMS if that helps/makes a difference... Thanks in advance! Hi, Recently i have designed a site on my personal Dell laptop. The screen width of my laptop is more than the length. I have kept the logo on the header side of the page, in my laptop everything looks fine, but when i see it in a desktop or any other computers the image or logo is looking aukward. When i see the same page at different laptops or desktops where the screen widths are more than the lenghts the image looks fine. Here i am attaching the page which shows the logo. Please find the code below which references a image(logo) in the page. Could any one please check this and let me know the reasons for this kind of look. Regards, Vikram <TD width="40%"> <TABLE cellSpacing=0 cellPadding=0 width=209> <TBODY> <TR> <TD bgColor=#0295e5> </TD></TR> <TR> <TD align=middle><A href="http://eastyconsultants.com/index.html"><IMG height=150 alt="Easty Consultancy Services" src="images/logo.gif" width=339 border=0></A></TD></TR></TBODY></TABLE></TD> <TD width="60%"> <TABLE cellSpacing=0 cellPadding=0 width=209> <TBODY> <TR> <TD class=toplinks style="PADDING-RIGHT: 2px" align=right bgColor=#fb6c00 height=20><IMG height=8 alt="" src="images/contacttop.gif" width=12> <A class=kk3 href="http://eastyconsultants.com/contactus.html">Contact Us</A> | <IMG height=8 alt="" src="images/sitemaptop.gif" width=10> <A class=kk3 href="http://eastyconsultants.com/sitemap.html">Sitemap</A> </TD></TR> <TR> <TD align=middle> <IMG height=152 alt="" src="images/aboutus_img.jpg" width=479> </TD></TR></TBODY></TABLE></TD></TR> I've done HTML for a while. A bit of CSS, not too much. This the first time I've made a design in photoshop and wanted to turn it into a website though. Can someone give me soem guidance on the best way to turn this into a website? Thanks. Hi. I am making a template for my site, and i really need my title image to display at the very top of the page, so the top of the image touches the bottom of the tool bar of the browser. This is currently what my page looks like www.skyhigh3d.com/testpage.html I would like the top of the black image to touch the top of the browser, so there is no background visable above the image. The image and navbar are in a table, so really i need to table to be at the very top. I know this is possible becuase i have seen many sites with the image at the very top, but no matter what i do it doesnt seem to work. Your help would be very much appreciated. Thanks -JC |
|||||||