Jump to content

HTML, Java and other help.


Beatles4
 Share

Recommended Posts

Hello there,I have various questions.1) Ok, I am using the image mage, but is it possible to use it with the javascript where you can make the picture change?Example_____|A|B||B|B|------Where the square is the picture but A is the clickable region,When clicking the region it takes you to the next page.What I want is this._____|C|B||B|B|------So when you hover your mouse over A it changes to C and then you can click it to next page.2) Someone said if you use width="100%" it resizes to what ever your browser and your screen res is, but the image map stays the same, if I make image mape how do I make it change as does the picture?3) Is it possible to have writing ONTOP of a image/picture?4) If so can you make writing scroll across a page, not the whole page but just part of it.5) Is there a free program to create and make icons for webpage or could I just do it in paint and save is as something to make the icon? Edit: How come if I zoom out of a picture using the browsers zoom is does not go funny or blurry but if I change the size of a picture using html it does go funny or wierd??Thankyou for your help and time.Beatles4

Edited by Beatles4
Link to comment
Share on other sites

Guest FirefoxRocks
Hello there,I have various questions.1) Ok, I am using the image mage, but is it possible to use it with the javascript where you can make the picture change?Example_____|A|B||B|B|------Where the square is the picture but A is the clickable region,When clicking the region it takes you to the next page.What I want is this._____|C|B||B|B|------So when you hover your mouse over A it changes to C and then you can click it to next page.2) Someone said if you use width="100%" it resizes to what ever your browser and your screen res is, but the image map stays the same, if I make image mape how do I make it change as does the picture?3) Is it possible to have writing ONTOP of a image/picture?4) If so can you make writing scroll across a page, not the whole page but just part of it.5) Is there a free program to create and make icons for webpage or could I just do it in paint and save is as something to make the icon? Edit: How come if I zoom out of a picture using the browsers zoom is does not go funny or blurry but if I change the size of a picture using html it does go funny or wierd??Thankyou for your help and time.Beatles4
1. You use an image map with 4 separate areas and you can configure the first one to change the src attribute of the image with JavaScript.2. Try using style="width: 100%". If that doesn't work, maybe someone else can help.3. Yes, just absolutely position a <div> and it should work.4. I think it is done with JavaScript, Google it for more details.5. You can check out Download.com, if you don't find anything there, I suggest you stick to Microsoft Paint.6. Because HTML stretches the picture out, raster images look blurry. If you want non-blurry images, please learn SVG.Hope that helps!
Link to comment
Share on other sites

Can you show me how to put the code in, and what the code looks like please because I am such a noob at this!!Like I said, I know what the java script is to change the picture, and I know how to use image map, but I don't know how to use together, thats what I need.Explained in question one in my first post! Here is the code:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Welcome to Wollaton Road Methodist Church.</title><meta name="Description" Beeston Methodist, The Church at Wollaton Road, Beeston, Nottingham, where people come together on Sunday service, to sing, pray and worship."><meta name="Keywords" content="Beeston Methodist, Wollaton Road, Wollaton Raod Methodist, Wollaton Raod Methodist Church, Methodist Church, Place of Worship"></head><body><body bgcolor="orange"><img border="0" src="Church Entrance.PNG."width="1234" hieght="960"alt="Click the Church entrance to enter our Church! :-)"usemap="#Church Entrance"><map id="Church Entrance" name="Church Entrance"><area shape="rect"Coords="216,270,810,930"alt="Click these doors to enter our Church! :-)"href="homepage.html"></map><embed src="Come Now Is The Time To Worship.mid"/><a href="homepage.html">Click here</a> if you can't see a picture here.</body></html>

Also how does the svg code fit into it as well(so picture doesn't get blurry when i change the size of it?Or say if width is 100% it will change cause screen resolution right?So how does it work?Like I said am a right noob at this so thank you very much for your time and help.

Link to comment
Share on other sites

?ALl I want is an image where you hover over a certain part of the image and it changes picture, and you can use the second picture as a link.Since am a right noob could you please show me the whole code or show me how the code would work with my source code which I posted above?Thank you very much! :)

Link to comment
Share on other sites

Hello there,I have various questions.1) Ok, I am using the image mage, but is it possible to use it with the javascript where you can make the picture change?Example_____|A|B||B|B|------Where the square is the picture but A is the clickable region,When clicking the region it takes you to the next page.What I want is this._____|C|B||B|B|------So when you hover your mouse over A it changes to C and then you can click it to next page. [...]
Have you seen in the w3schoosl tutorials, there's an example of javascript onmouseover which changes the image of a link when you hover. Have a look at that first. Then perhaps you can align your images A, B, B, B in a div if they are rectangular, and use a separate onmouseover event in this way for each image.If you want clickable regions within a single image, see the w3schools tutorials on javascript image maps. However, these don't change the image region appearance when you hover.Have a look at the above two tutorials and hopefully these will get you started.
Link to comment
Share on other sites

I know that, but I wanted to put the two codes together so that when you put the mouse over A in the whole box(A,B,B,B = one big square A is the region where you click) A changes to C and you can click on it.I was looking at Java scripting Animation and image maps but not sure how to put the two together.

Link to comment
Share on other sites

Yes, there is two images.The box I am trying to describe is one box.A is a clickable region,A changes to CThen you can click to go next page.B is just nothing, B is the outer parts of the click able region which make the rest of the picture.BTW thank you for taking your time to help me. :)

Link to comment
Share on other sites

Yes, there is two images.The box I am trying to describe is one box.A is a clickable region,A changes to CThen you can click to go next page.B is just nothing, B is the outer parts of the click able region which make the rest of the picture.BTW thank you for taking your time to help me. :)
Try this document. Does it do what you want? You'll need 3 image files in the current directory (imgA.gif, imgB.gif, imgC.gif).
<html><head></head><body>	<div style="position: absolute; left: 20px; top: 20px">		<div style="position: absolute; left: 0px; top: 0px">			<img src="imgB.gif" style="width: 100px; height: 100px" />		</div>		<div style="position: absolute; left: 0px; top: 0px">			<a href="http://www.w3schools.com">				<img id="clickarea" src="imgA.gif" style="border-style: none; width: 50px; height: 50px"					onmouseover="document.getElementById('clickarea').src='imgC.gif'" onmouseout="document.getElementById('clickarea').src='imgA.gif'" />			</a>		</div>	</div></body></html>

Link to comment
Share on other sites

No, not what I am looking for.I only have two images.I have used an image map so you can click a certain area of a picture to go next page.Now all I want that certain area is to change picture, but only when you hover mouse over the area, and only the area to change nothing else.This is why I have used two pictures that are same size.Edit, sorry with all the fuss, just that I am a right noob lol.

Link to comment
Share on other sites

No, not what I am looking for.I only have two images.I have used an image map so you can click a certain area of a picture to go next page.Now all I want that certain area is to change picture, but only when you hover mouse over the area, and only the area to change nothing else.This is why I have used two pictures that are same size.Edit, sorry with all the fuss, just that I am a right noob lol.
In that case I think you need two versions of the whole (outer) image: one with A in its top left, and the other with C in its top left.Then use an imagemap with one area, and use the area's onmouseover and onmouseout events to swap the image source:
<html><head></head><body>	<img id="img1" src="B_plus_A.gif" width="140" height="140" usemap="#map1" />	<map name="map1">		<area shape="rect" coords="0,0,70,70" onmouseover="document.getElementById('img1').src='B_plus_C.gif'"			onmouseout="document.getElementById('img1').src='B_plus_A.gif'" href="http://www.w3schools.com" />	</map></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...