Jump to content
php.lv forumi

Bildes poziconēšna centrā!


Sasa

Recommended Posts

šis kods man parāda biles, bet es nekādi tās nevaru dabūt monitora centrā,

 

oBorder.style.top="100px";
	  oBorder.style.left="300px";

 

izmantoju šīs divas rindiņas, bet ar tām es varu nolikt bildi tikai konkrētā vietā, kas man būtu jāpieliek kodam, lai tas rādītu bildi centrā?

 

<html>
<head>
<title>IMG</title>
</head>
<body>

<style type="text/css">

 #div {
margin:50%;
margin-top:25%;
}

</style>

<script type="text/javascript">
var oBorder = false;
var oImg = false;
var timer = false;
function  showLarge(img)
{
	if(!oBorder)
	{
	  oImg = document.createElement("img");
	  oBorder = document.createElement("div");
	  oBorder.style.padding="10px";
	  oBorder.style.position="absolute";
	  oBorder.style.backgroundColor="#B6BFA4";
	  oBorder.style.top="100px";
	  oBorder.style.left="300px";		  
	  if (oBorder.addEventListener) {
		oImg.addEventListener ("mouseover",resetTimer,false);
		oImg.addEventListener ("mouseout",hideLargeNow,false);
	  } else if (oBorder.attachEvent) {
		oImg.attachEvent ("onmouseover",resetTimer);
		oImg.attachEvent ("onmouseout",hideLargeNow);
	  } else {
		oImg.onmouseover = resetTimer;
		oImg.onmouseout = hideLargeNow;
	  }
	  oBorder.appendChild(oImg);
	  document.getElementById("bdy").appendChild(oBorder);
	}
	oImg.src=img;
	oBorder.style.display="";
	resetTimer();
}
function resetTimer() { if(timer) {window.clearTimeout(timer);} }
function hideLargeNow() { oBorder.style.display='none'; resetTimer();}
function hideLarge() { timer = setTimeout("oBorder.style.display='none'", 1000); }
 </script>



 <body id="bdy">
  <p>
	<img
		src="http://www.cssplay.co.uk/img/tdrips.jpg"
		width="75"
		width="75"
		alt="1"			
		onMouseOver="showLarge('http://www.cssplay.co.uk/img/drips.jpg')"
		onMouseOut="hideLarge()"
	/>
	<br>
	<img
	  src="http://images.google.lv/images?q=tbn:5sk80fTtQbxsSM:www.kenmusgrave.com/planet.jpg"
	  width="75"
	  width="75"
	  alt="2"
	  onMouseOver="showLarge('http://www.kenmusgrave.com/planet.jpg')"
	  onMouseOut="hideLarge()"
  />
  <br>
  text text text text text text<br />text text text text text text text text text text text text text text  text
</p>

</html>

Link to comment
Share on other sites

Hmm:

 

block elementiem ar noteiktu platumu var norādīt margin: 0 auto;, bet tas strādās tikai tad, ja ir norādīts pareizs DTD. Bet vispār šis laikam tev nederēs, jo img nav block elements.

 

Tavā gadijumā vari mēģināt parent elementam uzlikt text-align: center;. Tavā gadijumā tas laikam ir <p> elements.

Link to comment
Share on other sites

Man jau jācentrē tā bilde, kas paradās, kad pele ir uz mazās bildītes.

ja es izmantoju text-align: center; uz p elementa tad viņš iecentrē arī mazās bildītes.

 

Galvenais jau, lai tās lielās bildes ir pa centru!

Link to comment
Share on other sites

man škiet es sapratu kur ir tā vaina, ka viņš nevar ielikt to bildi centrā tas ir tāp�“c ka tiek izmantots:

oBorder.style.padding="10px";
	  oBorder.style.position="absolute";
	  oBorder.style.backgroundColor="#B6BFA4";
	  oBorder.style.top="100px";
	  oBorder.style.left="300px";

 

tas oBorder.style.position="absolute"; ir no CSS un apsolute nevar norādīt, lai tas ir centrā vienīgi var nolikt kur tu pats to gribi, bet man apsolute ir vajadzīgs, jo lai tā bilde atrodas tekstam pa virsu.

 

Ir kāds cits variants kā apmānīt viņu un dabūt to bildi centrā!

 

EDIT

Ja nevar lielās bildes ielikt centrā, dēļ tā ka es izmantoju style.position="absolute";, tad tā arī pasakiet liekšos mierā un domāshu ko tālāk, bet ir vēl kāds variants kā attēlot bildi pa virsu visam?

Edited by Sasa
Link to comment
Share on other sites

Man iznāca šitā

<script type="text/javascript">
<!--
function bildeon(name) {
document.getElementById("centra_bilde").src=name;
document.getElementById("centrs").style.visibility="visible";
}
function bildeoff() {
document.getElementById("centrs").style.visibility="hidden";
}
//-->
</script>
<table id="centrs" style="position: absolute; width: 100%; height: 100%; visibility: hidden;"><td align="center" valign="center"><img src="" id="centra_bilde"></td></table>
<img src="o_mazs.jpg" onmouseover="bildeon('o.jpg');" onmouseout="bildeoff();">

Link to comment
Share on other sites

kā lai pārveido manu kodu pēc šitā, jo tas strādā , bet kaut kas tomēr nav, jo kad kustina peli pa pildi tā rustās tākā pazustu un atkal parādītos, bet manā kodā parādāmo bildi neliek centrā :(, ja kāds var tad parādiet kā lie es šo kodu pielietojo savā! :)

Link to comment
Share on other sites

×
×
  • Create New...