|
HTML - Change Image Position?
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 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? 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 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. Ok, I dont know what its called, but you know that little 16x16 picture that appears before the URL in the address box? That little image that appears next to the lnks in your favorites? How do you change that? Hi: This morning I changed an old image on my website to a NEW image. No names were changed in my Main Page. Still the same old src=etc, etc However, after 20 minutes, the *old* image is still displaying. Even though I only have the *new* image on my apache Webserver !! *Who* keeps this old image and where do they keep it ? I'm very puzzled ! Can anyone explain this please ? Thank you. -Mel Smith I have been asked to redesign a site. The basic elements will stay the same, but the folder structure is crazy! The current site is http://www.npsign.com Please don't pay attention to the current code on the site. I'm doing a complete makeover, so the fact that it is currently not W3C standard will change. However, the index.html file or home page has pictures that rotate in a frame. I don't mind changing any code at all. In fact I think that I'm going to have to redesign the entire site!! On the home page you will notice that the pictures rotate and or change every 3 seconds or so. What I'm looking for is an answer to how to create this change in Dreamweaver CS5.5. The index.html file is the only file that this takes place on. I guess to give it a more dynamic look. However, is my best option to use adobe flash to change the images, or is there more simplified code to change the images in the block? Any feedback on this would be appreciated, even if there are multiple example for me to create the effect of different images changing. This could be a fade effect, or a simple picture to picture swap. This particular subject is beyond my knowledge, as well as a few more questions I may have. Basically, they are looking for a way to get this done on the cheap. I don't mind doing it because it is a learning experience for me!! Thank you for all responses!! Edit: This may be what I'm looking for! http://help.adobe.com/en_US/Dreamwea...f21-7ae8a.html Any response is appreciated! iv got two images and i want one to change into the other on mouseover but i also need it to be linked to a certain page , so basically its one image changing to another on mouseover and on click goes to a specified page if therea anything else you need to know please just ask Jake I'm designing a website in html for a college project. I'm having a bit of trouble so hopefully someone here can help me. At the moment I have a white square on the homepage that is a link. I was hoping that when I have visited the page it links to and return to the homepage this square will be a different colour. I don't know if this is even possible but I would appreciate any advice anyone can give me. Thanks I am having an impossible time finding the correct way to code this in Expression Web 4. I want to have an image that when it's moused over will change to another image, and back again to the original image when you move the mouse off. Nothing I can find online seems to do the trick, though. Any suggestions? I am working on my 3rd navigaition, except this time i need the images to change when the mouse goes over them. How should i go about doing this? I have seen many ways but i want to hear what you think the best way to do this is. Is it possible, and if so - how do I change color of an image using html. For example: HTML Code: <img src="http://i41.tinypic.com/30x7r49.png" border="0" color="blue /> But that doesn't work. I searched Google and found nothing. Any Solutions? Thank you in advance. 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! hi guys. i want to change the background image of a div when the user selects a football team from a dropdown select box. here's my code: Code:
function changeDivImageArsenal()
{
var imgPath = new String();
imgPath = document.getElementById("right_box").style.backgroundImage;
if(imgPath == "url(images/blackburn.jpg)" || imgPath == "")
{
document.getElementById("right_box").style.backgroundImage = "url(images/arsenal.jpg)";
}
}
function changeDivImageBlackburn()
{
var imgPath = new String();
imgPath = document.getElementById("right_box").style.backgroundImage;
if(imgPath == "url(images/arsenal.jpg)" || imgPath == "")
{
document.getElementById("right_box").style.backgroundImage = "url(images/blackburn.jpg)";
}
}
thats fine and works if i just have 2 different images. but if i want to have 20 different selections, what do i write in the 'if' statement? thanks in advance Hi, I'm trying to do an image changer that when you click on a link, an image changes. I have the image change working, but I want a link to the full-size image below to also change. I tried several things, but what makes the most sense to me is to have a function change the link, so I used the script I got for the image change and tweaked it so it would change the link.....it's not working. I've been trying very hard, but I'm not very good at javascript, so if someone could help, that would be wonderful! The page is he http://sc-lee.com/newlay/ac.html And the code in question is he Code: <head>
<script>
function changeImage(filename)
{
document.mainimage.src = filename;
}
***ntion changeText(linkadd)
{
document.link.href = linkadd;
}
</script>
</head>
<body>
<br><bR><a href="javascript:changeImage('studio/ac-1s.jpg'),changeText(ac-1.jpg);">perspective moving into court</a>
<br><a href="javascript:changeImage('studio/ac-3s.jpg'),changeText(ac-3.jpg)">perspective moving into court2</a>
<br><a href="javascript:changeImage('studio/ac-6s.jpg'),changeText(ac-6.jpg)">exterior perspective of complex</a>
<BR /><BR />
<img name="mainimage" src="studio/ac-1s.jpg">
<br /><a href="ac-1.jpg" target="_blank" name="linkadd">fullsize</a>
</body>
</body>
</html>
I understand Java on a primitive level. I am building a restaurant website; http://www.mypitagrill.com/test/ I have gotten the top 4 menu buttons to change the designated image on the right-side stage. Problem #1: When you scroll down just a bit, then click one of these top 4 menu buttons, it automatically refreshes to back to the top of the page. Although, I would like for the image to change without this refresh that is scrolling the page back to the top. -- Which I believe is the result of my second problem. Problem #2: If I click another remaining menu button that links me to another page entirely (such as; specials.htm, order.htm, location.htm), then click back to the 3 of 4 remaining top menu butons (such as; platters, appetizers, kinds menu), ...it does not bring me to the respective menu image, rather is automatically brings me to the default top image "Pita Sandwiches". I believe this is related to the "Auto Refresh" mentioned in Problem #1. -- You may even notice that I even tried incorporating webpage Anchors, to return to the respective image, but that didn't do the trick. Can anyone suggest what might be refreshing the page back to the top? Or does anyone have a similar Java script that I could try to avoid this exisiting problem? PS, thank God for websites like this, and for people like you that take the time to help others! It has saved my A** on several occasion! Best Regards- Right now i'm trying to make it so that an image is on my webpage, and when someone rolls their mouse over it, it changes to another image. It's a simple image conversion, all I changed is the arrow's depth. Thanks! Help-my-HTML |
|||||||