ABAKUS

Verfasst: **26.10.2007, 06:50**

hi, ich versuche eine kleine css-box auf einem image button zu positionieren. meine source code sieht so aus (habe nur das was unbedingt noetigt ist drinnengelassen, alles ander wuerde die sache nur schwieriger machen):

test.php

Code: Alles auswählen

<html>
<body>
	<form action="test.php" method="GET">
   	<input type="image" src="files/php7A9.png" value="Submit" alt="Submit" class="imagemap" style="cursor&#58;crosshair;">
	</form>
<?
$image&#91;'width'&#93; = 630;
$image&#91;'height'&#93; = 291;
$image&#91;'path'&#93; = 'files/php7A9.png';

	$mark = center_box&#40;&#41;;
	$bf .= '<div style="width&#58;'.$image&#91;'width'&#93;.'px; height&#58;'.$image&#91;'height'&#93;.'px; background-image&#58;url&#40;'.$image&#91;'path'&#93;.'&#41;;">&nbsp;
			<div id="in_map" style="position&#58; relative; top&#58;'.$mark&#91;'y'&#93;.'px; left&#58;'.$mark&#91;'x'&#93;.'px; border&#58;'.$mark&#91;'border'&#93;.'; width&#58; 5px; height&#58; 5px; z-index&#58; 99; background-image&#58;url&#40;files/marker.gif&#41;;background-repeat&#58; no-repeat;">
			</div>';
	echo $bf;
?>

	</div>
</body>
</html>

<?
function center_box&#40;$mark=""&#41; &#123;
	if&#40;!is_array&#40;$mark&#41;&#41; &#123;
		//adjust offset
		$x_offset = -2;
		$y_offset = -22;
		$mark = array&#40;"x"=>getget&#40;"x", 0&#41;+$x_offset,
					 "y"=>getget&#40;"y", 0&#41;+$y_offset,
					 "border"=>"0px solid red;",
					 &#41;;
	&#125;
//	$mark&#91;'x'&#93; = $mark&#91;'x'&#93;-ceil&#40;$width/2&#41;;
//	$mark&#91;'y'&#93; = $mark&#91;'y'&#93;-ceil&#40;$height/2&#41;;
	return $mark;
&#125;

function getget&#40;$varname, $default=""&#41; &#123;
	//request a get variable, clean it up, assign a default if false
	if &#40;!isset&#40;$_GET&#91;"$varname"&#93;&#41;&#41; $value = $default;
	else $value = $_GET&#91;"$varname"&#93;;
	$value=urldecode&#40;trim&#40;$value&#41;&#41;;
	return $value;
&#125;
?>

als image datei koennt ihr alles moegliche nehmen was groesser als 100x100 ist, muesst aber dann $image anpassen. files/marker.gif ist eine 5x5px grosses +.

ok, 2 fragen dazu:
- wieso muss ich das $y_offset um ganze 22 pixel korrigieren (selbes problem in ie und ff), damit der marker dann auch dort ist wo ich hingeklickt habe?

- im fertigen projekt will ich die grafik nur einmal anzeigen; dh. der marker sollte idealerweise auf dem button erscheinen - wie mache ich das, der button ist ja kein container element wie das div...?

ABAKUS

positionierung box auf image button

positionierung box auf image button