Jump to content

Image Mapping Problem


tissot

Recommended Posts

Look at my last post <>----

<html><head><script type="text/javascript">function newImage(arg) {	if (document.images ) {  rslt = new Image();  rslt.src = arg;  return rslt;	}}function changeImages() {	if (document.images ) {  for (var i=0; i<changeImages.arguments.length; i+=2) { 	 document[changeImages.arguments[i]].src = changeImages.arguments[i+1];  }	}}// --></script></head><body><table id="Index" width="714" height="600" border="0" cellpadding="0" cellspacing="0">	<tr>  <td rowspan="3"> 	 <img src="images/Index_01.gif" width="23" height="600" alt=""></td>  <td colspan="2"> 	 <img src="images/Index_02.gif" width="665" height="129" alt=""></td>  <td rowspan="3"> 	 <img src="images/Index_03.gif" width="26" height="600" alt=""></td>	</tr>	<tr>  <td colspan="2"> 	 <img src="images/Index_04.gif" width="665" height="30" alt=""></td>	</tr>	<tr>  <td> 	 <img name="buttons" src="images/contents.gif" width="129" height="441" border="0" usemap="#buttons"> 	 </td>  <td width="536" height="441" background="images/Index_06.gif"></td>	</tr></table><map name="buttons"><area shape="poly" coords="20,53,35,36,78,82,64,99" HREF="home.html"    onmouseover="changeImages('index_Layer_18', 'images/index_Layer-18-over.gif'); return true;"    onmouseout="changeImages('index_Layer_18', 'images/index_Layer-18-out.gif'); return true;"    onmousedown="changeImages('index_Layer_18', 'images/index_Layer-18-over.gif'); return true;"    onmouseup="changeImages('index_Layer_18', 'images/index_Layer-18-over.gif'); return true;"></map></body></html>

Link to comment
Share on other sites

Ok, I did it. Everything is working good so far.But I have a problem lol..my laptop has a high screen resolution, which has more resolution than the HTML page i have designed using my desktop. When I view the HTML page using my desktop, it looked right but if I view the HTML page using my laptop, it looks wrong.. screenshot from my laptop below.http://img75.imageshack.us/img75/4527/error5md.pngHow can I add a "literally" backup image to replace the green gap thing(the green gap below the table in the HTML page from the screenshot above).. no matter how many resoultions you need to view the HTML page because the backup image will be there. I dunno how exactly to explain.. its like eating food untill your stomach is full, which is the same concept.... in speaking of that, the green gap will be gone because of the backup image :)

Link to comment
Share on other sites

i have another problem too..I have done the animated buttons on the entirely image. Whenever I hover a first animated button, it animates.. but if I hover another animated button.. the first animated button stops animating right after i hover the second animated button... how do l stop that from happening? Do l require Flash to do that or .. ?

Link to comment
Share on other sites

Can you post links to images that works i we can see what's going on :)

I have done the animated buttons on the entirely image. Whenever I hover a first animated button, it animates.. but if I hover another animated button.. the first animated button stops animating right after i hover the second animated button... how do l stop that from happening? Do l require Flash to do that or .. ?
Would need to see it working with the images :) You call the function with parameters:changeImages('index_Layer_18', 'images/index_Layer-18-out.gif')Then the function doesn't accept any:function changeImages() {What's the point in that? :)
Link to comment
Share on other sites

to recall the function to change images? I dunno, i'm not that good at javascript, mind me ;p.and I dont have a host to link the files to show you, i dont know where to upload.. couldnt think of wherehmm, i have no idea how to fix the problemshave u seen the screenshot? That green gap thing... i dunno how to fix that, and animated button problem too..

Link to comment
Share on other sites

and I dont have a host to link the files to show you, i dont know where to upload.. couldnt think of where
You could use Imageshack or a Free Host
to recall the function to change images? I dunno, i'm not that good at javascript, mind me ;p.
It's ok i see what's happening, it's accessing the parameters through a way i've not seen before document[changeImages.arguments].srcfunction.arguments .... *takes note :)
Link to comment
Share on other sites

How can I add a "literally" backup image to replace the green gap thing(the green gap below the table in the HTML page from the screenshot above).. no matter how many resoultions you need to view the HTML page because the backup image will be there. I dunno how exactly to explain.. its like eating food untill your stomach is full, which is the same concept....  in speaking of that, the green gap will be gone because of the backup image :)
Ok i think i see the problem know, basically you img isn't big enough for a higher resolution?You could do a javascript test,
if(screen.width>1000)document.getElementById(imgname).src="biggerpic.gif";

That checks the screen width to see if its more than 1000, if so get an image and change it's sourceimgname = the id of the image you want to change, you will need to specify this.biggerpic.gif = the new pic to be added if test is true

Link to comment
Share on other sites

i have another problem too..I have done the animated buttons on the entirely image. Whenever I hover a first animated button, it animates.. but if I hover another animated button.. the first animated button stops animating right after i hover the second animated button... how do l stop that from happening? Do l require Flash to do that or .. ?

The problem isn't caused by hovering over another button, it because you are moving off the button your on. If you highlight the home button then quickly move off it (without touching any other button) you will see it still happens. Maybe it's a case of doing each image swap with seperate functions so they don't collide. :)
Link to comment
Share on other sites

Ok i think i see the problem know, basically you img isn't big enough for a higher resolution?You could do a javascript test,
if(screen.width>1000)document.getElementById(imgname).src="biggerpic.gif";

That checks the screen width to see if its more than 1000, if so get an image and change it's sourceimgname = the id of the image you want to change, you will need to specify this.biggerpic.gif = the new pic to be added if test is true

I knew that the image isnt big enough for a higher resolution but..what i meant is.. the backup image's size would be 714x1, which will automacially add onto the bottom of the page to glue your resolution so there wont be any gap at all... a lot of backup image will be added (same image, same size). See what i mean? thats probably what i want to achieve.
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
×
×
  • Create New...