|
HTML - Need Help With Onmouseover And Changing The Position Of An Image
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? Similar TutorialsHey guys. I'm having a little trouble manipulating this image the way I want to. Here's my goal: I have a large image of the city of Louisville and additional images of that are identical, but have certain regions/neighborhoods highlighted. I'm wanting to have the image displayed in full and when the user hovers over a certain area, or part of the city, then the image with that area highlighted is displayed until onMouseOut. Here's what I have so far, the onmouseover doesn't seem to be working at all. Code: <html>
<head><title>xxxx</title>
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function mouseOver() {
document.louisville.src = "images/Louisville_Downtown.JPG";
}
function mouseOut() {
document.louisville.src = "images/Louisville_Full.JPG";
}
//--></script>
</head>
<body onLoad="MM_preloadImages('images/Louisville_Full.JPG','images/Louisville_Audubon.JPG',
'images/Louisville_Downtown.JPG','images/Louisville_Poplar_Newburg.JPG','images/Louisville_Shively.JPG','images
/Louisville_ValleyStation.JPG')">
<center>
<FONT size = "5"><B>Louisville Neighborhoods</B></FONT>
<br>
<img id="pic" src="images/Louisville_Full.JPG" alt="" usemap="#louisville" border="0" name="louisville">
<map id="louisville" name="louisville">
<area shape="rect" coords="0.000, 0.000, 7.000, 7.000" onmouseover="mouseOver()" onmouseout="mouseOut()">
</map>
</center>
</body>
</html>
The coords aren't setup correctly yet, but I'm just trying to get it to do something. Any help would be appreciated. -Tyler This isn't really a problem but just wanted to learn how to make an image expand or get bigger onmouseover. You can see what i mean by going to these website's. one is for a video and one is for a image. http://www.appstorehq.com/htmleditor...hone-63962/app Put your mouse over the screenshots. http://videocopilot.net/tutorials/ Put your mouse over the screenshots. 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 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? 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 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 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? Hi there I'm currently making a estate agency for my college project and have come into a problem I am not that great with html I much prefer programming rather than web development So here is the question how do I change a image on click of another image (for say there is 1 big image on the website and 3 smaller ones I want to change the content of the big image into the clicked smaller image) an example of this is at the following website: http://www.haart.co.uk/buying-house/...ls_160839.aspx Any help would be great thanks dave I need to make it so when you click on the image map it changes the image and changes the image map. I am ONLY using html and javascript is not an option. I am shure it is something stupid... <code> <img src="image.gif" id="image" border="0" name="image" usemap="#tour" /> <map name="tour"> <area shape="circ" coords="46,39,20" onClick=" document.getElementById('image').src='flag1.jpg'; document.getElementById('image').useMap='tour2'; <!--NOT WORKING ^?!--> "> </map> <map name="tour2" id="tour2"> <area shape="rect" coords="590,325,650,408" onClick="document.getElementById('image').src='flag.jpg';"> </map> </code> why???! throwing in another random question I can't change the cursor with image maps either... onMouseOver="this.style.cursor='help'" inside my code is not changing anything... when I highlight the mouse over the image map section... Dear HTML Experts, I forget the code which changed the image when, the cursor was at it? Can someone tell me the code? 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 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. I want to insert an image, but I want it to change to other images after a certain time frame (i.e. 5 seconds) as in a scrolling/moving image?? Can any one tell me how I can do this? I'm not sure if this is even the right forum!! Thanks! sorry for the strange title to my problem, but it's the best I can do. On the site below: http://www.nomagicneon.com/shows.html I have an image (not the truck) that contains data in the middle of it. I made it in MS publisher, now to change the data, I have to go back to MS pub. and change and save and resize etc etc. What I would like to do is: Make the image, cut out the data and then be able to put the data in using HTML code. I think that would require using code for the data and the new picture I created using absolutes. but since never using absolutes, I am not sure. any ideas? TIA Hello to everyone, Does anyone happen to know why firefox is messing up the color of my image? (see attached). thanks, NetGD Hi. I set the opacity of content tables within my webpage to 0.90 so that my background can be seen slightly. However my images in these content tables are also see through. How do i make the images 100% opaque? I have tried entering the image code like this: <IMG SRC="http://i49.photobucket.com/albums/f293/jmzcherry/pete-doherty-gio-goi.jpg" STYLE=filter:alpha(opacity=100) WIDTH="245" HEIGHT="250" ALIGN="left"> but that didnt work. Heres how i did the opacity for the tables: table table table td { background-color:FFFFFF; filter:alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; -khtml-opacity:0.90; } table table table table td {filter:none;} Wondering if it's possible to make a circular image change to a different image on mouseover for each of the links in the sample photo. I'm thinking this would be easy to do if the image were square and not circular. Sorry if this is in the wrong section. Is this possible and could you point me in the right direction? 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! I am trying to changed the logo on my website. The part of the html code which does this, is showing as: <div id="logo-div" class="fw-logo"></div> the logo is a .gif file and I cant find anywhere in the html which is calling this image file. Where is it getting logo-div and fw-logo from, can someone please explain the html above that I posted |
|||||||