|
HTML - Html How To Position Image Need Help?
Hi I have a clickable image on my site that I moved to the right and up using html, but the image always moves when I refresh the page or change browsers. My code looks like this:
<a href="LINK" target="blank"> <img src="XXXXX.jpg" WIDTH=165 HEIGHT=477 style="position: absolute; top: 1190px; left: 998px;"/> How do you make it so that my image doesn't move when I refresh the page. I know it probably has something to do with "absolute" position but I'm not sure how to fix it. Any help is appreciated. Thanks Similar Tutorialslet 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? Ok, so i have an image that's 2 x 1 and the div I'm placing it in is 1 x 1. (easy math example) My website is showing the top half of the image, which is what i want it to do. I would like it to show the bottom half of the image when i put my mouse over it. How do i do this? (It's a blue button that changes yellow) So basically how do i change the image position in that div? Thanks Hi, My problem is i can a marquee scrolling up inside an image, but on different browsers load the text in different places. Is there a way i can code it so the text position is relevant to the image or will i have to maybe make it one image somehow? Thanks Tom ok here is my problem. when i insert an image and do the onmouseover to change the image it works when i dont change the position of the image. Here is the problem, when i change the position, the onmouseover does not work. here is the code without the position change <html> <head> </head> <body> <body bgcolor="white"> <img src="http://i25.tinypic.com/1j53eb.jpg" onmouseover="src='http://i28.tinypic.com/2qatid5.png'" onmouseout="src='http://i25.tinypic.com/1j53eb.jpg'"/> <div style=" top: 150; left: 260; position: absolute; z-index: 1; visibility: show;"> <img src="http://i29.tinypic.com/1057k1e.png"/> </div> <div style=" top: 520; left: 500; position: absolute; z-index: 1; visibility: show;"> <img src="http://i27.tinypic.com/zjjvqr.png"/> </div> </body> </html> here it is with the position change <html> <head> </head> <body> <body bgcolor="white"> <div style=" top: 200; left: 200; position: absolute; z-index: 1; visibility: show;"> <img src="http://i25.tinypic.com/1j53eb.jpg" onmouseover="src='http://i28.tinypic.com/2qatid5.png'" onmouseout="src='http://i25.tinypic.com/1j53eb.jpg'"/> </div> <div style=" top: 150; left: 260; position: absolute; z-index: 1; visibility: show;"> <img src="http://i29.tinypic.com/1057k1e.png"/> </div> <div style=" top: 520; left: 500; position: absolute; z-index: 1; visibility: show;"> <img src="http://i27.tinypic.com/zjjvqr.png"/> </div> </body> </html> when you mouse over, you have to be in the exact middle... can someone help me? The code below attempts to do the following... Create a div with 2 'lines' in it each consisting of a piece of text and and a clickable img. HTML Code: <div> <div id="A"> <a><img src="http://localhost/plus.gif" onclick="DoSomething()"></a> <span>text related to image</span> </div> <div id="B"> <a><img src="http://localhost/min.gif" onclick="DoSomething2()></a> <span>text related to image</span> </div> </div> My problem is that the images are too high in relation to their line of text. If I use margin-top on the img it lowers the entire div (divs 'A' and 'B' that is), down. How do I lower just the image (or alternatively bring the span text up)? the above HTML layout is not a necessity, I just need it to achieve the visual layout I'm going for, I don't care how. Thanks. Hello, I am looking for a piece of HTML that would stop the scrollbar from automatically resetting to the top of the page once the link has been clicked and the new page is visible, as the website i am currently building is a portfolio container of sorts, and I have a load of images that I wish to appear to be on the same web page but when the "next" button is clicked it is merely taking the viewer to an entirely new page built of identical code but for the different image content. I want the scrollbar to stay at the bottom of the screen (I have a page that is 1063px high with the images at the bottom) once links have been clicked on, and I would be very grateful if somebody in the know has the time to reply. here's the as-yet unfinished web page. http://www.alexhaines.co.uk/footprints.html - click the links to the different housing projects (currently only the brevoort button works :-/ ) to see what I'm talking about specifically with the scrollbar defaulting back to the top. Many sincere thanks in advance, Alex Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! Hey guys. I need a little help with my HTML image rotator. Everything works fine, except the images don't show up on the right slide. All 4 images show up on the first slide. I can't figure out what's wrong. Any help will be greatly appreciated. Code: <!DOCTYPE html>
<html>
<head>
<title>...</title>
<style>
#sliderwrap {
height: 403px;
}
#sliderleft {
width: 10px;
height: 100%;
float: left;
background: #efefef;
border: 1px solid #ccc;
}
#sliderleft div {
height: 100px;
border-bottom: 1px solid black;
}
#slidercontent {
position: relative;
width: 650px;
height: 100%;
float: left;
border: 1px solid black;
overflow: hidden;
}
#sliderimages {
position: absolute;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
#sliderimages img {
display: block;
}
.s0 #slide0,
.s1 #slide1,
.s2 #slide2,
.s3 #slide3 {
background: #ccc;
}
.s0 #sliderimages {top: 0 }
.s1 #sliderimages {top: -500px}
.s2 #sliderimages {top: -1000px}
.s3 #sliderimages {top: -1500px}
</style>
<script>
var slide = 0;
var interval_id = 0;
function stop_timer() {
clearInterval(interval_id);
if (this.getAttribute("data-slide")) {
slide = parseInt(this.getAttribute("data-slide"));
document.getElementById("sliderwrap").className = "s" + slide;
}
}
function start_timer() {
clearInterval(interval_id);
interval_id = setInterval(
function() {
slide = (slide + 1) % 4;
document.getElementById("sliderwrap").className = "s" + slide;
},
3000
);
}
window.onload = function() {
start_timer();
var el = document.getElementById("slidercontent");
var divs = document.getElementById("sliderleft").getElementsByTagName("div");
for (var i = 0; i < divs.length; i++) {
divs[i].onmouseover = stop_timer;
divs[i].onmouseout = start_timer;
}
el.onmouseover = stop_timer;
el.onmouseout = start_timer;
}
</script>
</head>
<body>
<div id="sliderwrap" class="s0">
<div id="sliderleft">
<div id="slide0" data-slide="0"></div>
<div id="slide1" data-slide="1"></div>
<div id="slide2" data-slide="2"></div>
<div id="slide3" data-slide="3"></div>
</div>
<div id="slidercontent">
<div id="sliderimages">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
<img src="http://i.imgur.com/8iWz6.jpg">
<img src="http://i.imgur.com/1d2U6.jpg">
</div>
</div>
<div style="clear: both;"></div>
</div>
</body>
</html>
Ok so this image works on a table i did, and it covers the whole table nicely, but now i need to know how i can put another image that goes behind everything except the table and the table image and wont overlap everything in the table <TABLE BORDER="0" cellpadding="0" CELLSPACING="0"> <TR> <TD MAX-WIDTH="100%" MAX-HEIGHT="100%" BACKGROUND="grey.jpg" VALIGN="bottom"> </td> </tr> </table> Hi, I have a question regarding the code to use to create a horizontal line of small images across the page , from left to right. I want to use them as a horizontal divider between blog posts on our website. The image is a small flower which we use as a logo on our website. This is the image location - http://www.lannacharm.com/files/1/00...ower_small.gif So far I have ended up with a verticle line of images, which is useless, or a block of images which wraps itself around the image above it. That is another problem I am having, how do I place this new line of images below the existing image, or text ? There must be some code I can place between them to separate them. For some reason the line of images insists on going to the right of the existing image. Hope someone can help me with this one. Thank You, Mickmac Hello everyone! My friends and I are launching a new gaming site. We're using Wordpress to do most of the editing, since none of us are very familiar with web design or coding. I can edit the HTML / CSS of the template we're using; I'm happy with the template overall, but I would like to upload our custom Logo graphic. I've got the graphic saved in the FTP, but when I open up the HTML for the page, I quickly become lost. I'm not sure where I'd put the graphic code or even what the code is. I know this isn't much information, but if anyone could post on here or PM me with what else I should provide to help me do this, I will gladly do so. Again, I'm looking to -Upload a custom header graphic -Figure out the proper code to upload my graphic -figure out where in the HTML to put the code to do so I'll gladly supply any other information necessary to help figure this out. Thanks! Hi... I need to put an alternate image(not text) like 'Image Not Available', if the image is not able to fetch from the database. Is there any method to do this? Thanks in advance. -Swathi Hi everyone, How would I go about fading one image into another when the page loads? I know it's something to do with onload, however would know a code or anything for it. Basically I want it to be exactly like this page with the pencils... http://www.bh-digital.com/about_us.html Thank you to anyone who helps Regards Ryan HTML Code: <a href=http://www.ninjahelper.kk5.org onMouseOver= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/on7.png';" onMouseOut= "if (document.images) document.off7.src= 'http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png';"><img src="http://securegames1.weebly.com/uploads/5/5/1/0/5510021/off7.png" name=off7 border=0></a><..copyright muizyusuff.securegamesstudio.t83.net all rights reserved..!> TRY THIS CODE OUT AND TELL ME WHAT YOU THINK. IT WAS MADE BY ME AND ALSO SITE. DON'T MIND THE LINK. CHANGE IT IF YOU WANT. IT WOULDN'T WORK WITHOUT A LINK. SYYR. NEED HELP WITH THIS, TELL ME. P.S IF YOU DON'T HAVE A HTML EDITOR, YOU CAN USE ONE ONLINE AT http://www.onlinehtmleditor.net/. BYE. _________________________________________________________________ I'm editing a map and want to change the size of the box that appears when I mouse over an object. The code for the entire map is <table width="550" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="img/map_top.gif" width="464" height="222" usemap="#projects" border="0" name="Image1"> <map name="projects"> <area shape="circle" coords="254,167,16" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('no_box','','img/hiv_label.gif',1)"> <area shape="circle" coords="158,183,16" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('no_box','','img/hiv_label.gif',1)"> <area shape="circle" coords="141,151,16" href="#" onMouseOut="" onMouseOver="MM_swapImage('no_box','','img/css_label.gif',1)"> <area shape="circle" coords="81,120,7" href="/science/phs/cprp/projects/whiscc.html" target="/science/phs/cprp/projects/whiscc.html" onMouseOver="MM_swapImage('no_box','','img/whi_label.gif',1)" onMouseOut="MM_swapImgRestore()"> </map> <br> <img src="img/map_bottom_left.gif" width="221" height="38"><img src="img/no_box.gif" width="243" height="38" name="no_box"> <br> </td> </tr> </table> To pick one specific example that I want to edit, I want the circle produced by <area shape="circle" coords="141,151,16" href="#" onMouseOut="" onMouseOver="MM_swapImage('no_box','','img/css_label.gif',1)"> to produce a larger box (the css_label image gets compressed and make the words hard to read.) How do I increase the size of the css_label.gif so it is readable? Thanks, Kevin. im making a navigation image for my forum as an image map, but how do i find out what the co-ordinates are for the links i need? sorry if this doesnt make sence,anything else you need to know please ask Jake Hi there, I am not able to figure out why there are blue lines around my images on this page http://www.surveys.hottestdeals.info. If i want to get rid of them, where should i make the changes in CSS sheets? Thanks for any help. Kris Okay... Here is what I'm trying to do...and not really sure as an HTML novice where to even start. I have something called a 'blogwall' on my site, it's url is he http://www.weusecoupons.com/index.php?pageid=blogroll What I would like to do, is on the main page: www.weusecoupons.com Have a ONE of the 125x125 buttons appear randomly. Is this a simple thing? All images are hosted locally!! Thanks for your help. |
|||||||