Php And Showing Pics

[turbopowerdmaxsteel 0]

Great job, Quatrux. One small recommendation, though. Better not to specify the host in the links. In case he tries to host the site at Xisto.

The modified code will be:-

* {  margin: 0;  padding: 0;}a:link {  color: white; text-decoration: none; }a:visited {  color: green; text-decoration: none; }a:hover { color: orange; }.boldtable{position:relative;top:216px;left:250px;font-family:sans-serif;font-size:12pt;color:yellow;background-image: url('pic/grass.jpg');	background-repeat: repeat;}.boldtable1 TD, .boldtable1 TH{font-family:sans-serif;font-size:8pt;width:74px;height:57px;color:yellow;}p.map{ position:relative;left:20%;top:20%;width:70%;height:70%;background-image: url('pic/grass.jpg');background-repeat: repeat; }

One more thing, files in Linux are case sensitive hence Pic and pic would refer to different directories. It won't cause any problem as long as you are testing the site on your localhost.

link rel="stylesheet" type="text/css" href="map.css" /><p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo '<img style="position:relative;top:'.$y.'px; left:'.$x.'px;" src="pic/mark.jpg">';?><table class="boldtable1" cellspacing="0"><link rel="stylesheet" type="text/css" href="map.css" /><?php$x=$_GET['x'];$y=$_GET['y'];  for($j=0;$j<10;$j++)   {echo '<tr>'; for($i=0;$i<10;$i++)   {if(($i!=$x)||($j!=$y)){?>   <td>	<?php echo '<a href="map.php?x='.$i.'&y='.$j.'">'; ?>	<img src="pic/grass.jpg" /></a></td>  <?php }   else { ?>   <img src="pic/mark.jpg" /></td>  <?php }}  echo '</tr>';  }?></table></p>

[Quatrux 4]

I wanted to show him how the http://localhost thing works, that he would never use file://C:\WAMP\ again unless reading html files from his desktop

[yordan 10]

In case he tries to host the site at Xisto.

Or, more probably, "because he will have to host his site at Xisto" ! :rolleyes:You are right, Quatrux, he has to learn how to write portable applications, because each developer has to think about portability, ease of installation, and backup-restore needs.

[khalilov 0]

Thanks it worked now, can you tell me what you changed exactly in the code and what was denying its view in IE?And regardign the http:// part i already do it the way you guys say i just did it like this this time cuz i couldn't find what was wrong and was trying out all possible errorsXD

[Quatrux 4]

I don't know what was bad and why it didn't work, I personally just fixed some coding to make it normal and it started to work, if it wasn't your locations to images, then I think it was your html which wasn't valid, until I did some changes. Also in your code in map.css file grass.jpg should point to pic/grass.jpgWhy do you bother? you've got the fixed code, use it ;] also you got some tips, use them.

[khalilov 0]

Iam trying to recreate it since iam gona use that alot on my site.

<link rel="stylesheet" type="text/css" href="map.css" />[tab][/tab][tab][/tab]<style type="text/css">/*<![CDATA[*/[tab][/tab][tab][/tab]/* =======[tab][/tab][tab][/tab]Template CSS[tab][/tab][tab][/tab]============*/[tab][/tab][tab][/tab]* html { margin:0; padding:0;}[tab][/tab][tab][/tab]html, body { height: 100%; }[tab][/tab][tab][/tab]#wrapper { min-height: 100%; }   /* div you want to stretch */[tab][/tab][tab][/tab]body { margin:0 auto; text-align:center; background-color: #eeddbb; }[tab][/tab][tab][/tab]p { margin: 1em; padding:1em; text-align:left }[tab][/tab][tab][/tab]#wrapper { margin: 0 auto; width:1000px; background-color: #ffeecc; border: 1px solid #666666; }[tab][/tab][tab][/tab]#header { margin: 1em 0; text-align:center; border-bottom: 1px solid #666666; }[tab][/tab][tab][/tab]#header h1 { margin: 1em 0; }[tab][/tab][tab][/tab]#footer { margin: 1em auto; padding: 1em; text-align:center; border-top: 1px solid #666666; }[tab][/tab][tab][/tab]#footer a { margin: 1em auto; padding: .15em; }[tab][/tab][tab][/tab]/* =======[tab][/tab][tab][/tab]Page specific CSS Below this line[tab][/tab][tab][/tab]============*/[tab][/tab][tab][/tab] a:link {  color: white; text-decoration: none; }   a:visited {  color: green; text-decoration: none; }    a:hover { color: orange; }[tab][/tab][tab][/tab]h1,h2 {[tab][/tab][tab][/tab]text-align:center;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]h3 {[tab][/tab][tab][/tab]text-decoration: underline;[tab][/tab][tab][/tab]text-align: left;[tab][/tab][tab][/tab]margin-left:5em;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]h4 {[tab][/tab][tab][/tab]margin: .5em 5em;[tab][/tab][tab][/tab]text-align: left;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]p {[tab][/tab][tab][/tab]margin: 4px 5em;   /* ==> left and right margins are critical. see notes on page */[tab][/tab][tab][/tab]padding: 4px 10px;[tab][/tab][tab][/tab]text-align:justify;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]/*[tab][/tab][tab][/tab]=================================[tab][/tab][tab][/tab]start of Tooltip css code here[tab][/tab][tab][/tab]================================= */[tab][/tab][tab][/tab]a.info{[tab][/tab]   [tab][/tab][tab][/tab]text-decoration:none;[tab][/tab][tab][/tab]font-style:italic;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]a.info:hover {[tab][/tab][tab][/tab]z-index:125;[tab][/tab][tab][/tab]background-color:#ffff66;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]a.info span{[tab][/tab][tab][/tab]display: none;  /* hide the span text using this css */[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]a.info:hover span{ /*the span will display just on :hover state*/[tab][/tab][tab][/tab]display:block;[tab][/tab][tab][/tab]position:absolute;[tab][/tab][tab][/tab]top: 0px;[tab][/tab][tab][/tab]left: -100px;[tab][/tab][tab][/tab]width:100px;   [tab][/tab][tab][/tab]border:1px solid orange; /* border colour */[tab][/tab][tab][/tab]background-color:yellow; /* background colour here */[tab][/tab][tab][/tab]color:#000000;[tab][/tab][tab][/tab] /* text colour */[tab][/tab]  [tab][/tab][tab][/tab][tab][/tab][tab][/tab]text-align: center;[tab][/tab][tab][/tab]font-size: 15px;[tab][/tab][tab][/tab][tab][/tab][tab][/tab]z-index:30;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab].images {[tab][/tab][tab][/tab]vertical-align:bottom;[tab][/tab][tab][/tab]}[tab][/tab][tab][/tab]/*]]>*/[tab][/tab][tab][/tab]</style><!--[if lte IE 6]><style type="text/css">#wrapper {height: 100%;}</style><p class="map"><?php$x=$_GET['x'];$y=$_GET['y'];$x*=74;$y*=57;echo "<a class=info><img class='images' alt='' style='position:relative;top:".$y."px;left:".$x."px;'src='pic/mark.jpg' ><span>mark</span></a>";?><?php /* <table  class=boldtable1 cellspacing=0><link rel="stylesheet" type="text/css" href="map.css" /><?php$x=$_GET['x'];$y=$_GET['y'];  for($j=0;$j<10;$j++)    {echo "<tr>"; for($i=0;$i<10;$i++)   {if(($i!=$x)||($j!=$y)){?>   <td>[tab][/tab]<?php echo "<a href=map.php?x=".$i."&y=".$j.">"; ?>   [tab][/tab]<img src="pic/grass.jpg"></a></td>    <?php }   else { ?>   <td><img src="pic/mark.jpg"></td>   <?php }}  echo "</tr>";  }</table>  */?></p>

The CSS file is still the same, the pic that will reveal mark when hovered over does not appear in IE, can you do your magic and tell me what you did cuz i keep modifiing and recreating the code, so i don't wanna keep asking the same subject over and over :/

Note: some of the code (CSS part) i got from the internet, do i need to quote it too? do i use quote and code tags at the same time?

Edit: whats with the tabs in the code O.o
Edited December 15, 2008 by khalilov (see edit history)

[Quatrux 4]

I don't know, but when I remove this line: </style><!--[if lte IE 6]>

 

Everything starts to work, I never used any of those hacks for IE, because I hate IE in some way and everything or most of the stuff can be done without that nonsense.. I use IE7 and when I remove that line it works, so something is bad with your syntax for those kind of hacks with IE or whatever you can call them.

[khalilov 0]

Iam trying to make my site compatable with both firefox and IE, liek i said that code isn't mine i'll try to fix it.

[yordan 10]

I don't know, but when I remove this line: </style><!--[if lte IE 6]>

I already had this problem in one of my HTML pages, I removed the line and it worked fine, even with Internet Explorer.

Iam trying to make my site compatable with both firefox and IE, liek i said that code isn't mine i'll try to fix it.

I agree, your site should be visible by everyone, including the poor guys who bought a ready-for-use computer with IE6 installed. However, the instruction "[if lte IE 6]>" could happen to be not absolutely necessary, so simply try your thing with IE6 and if it works, let's simply be happy and forget about everything else.

[wutske 0]

Iam trying to make my site compatable with both firefox and IE, liek i said that code isn't mine i'll try to fix it.

Don't use hacks for FF and IE compatibitly, it's a nasty habbit. It's a much better practice if you aquire this by using different codes.
IE hacks should only be use if there's no other way (ie. the screwed up IE6 engine is causing you headaches).