js + php: toon image naam

Status
Niet open voor verdere reacties.
ecross

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo allemaal,
eerst: ik kan niet zo goed javascript,
tweede: ik heb met php een script gemaakt waarmee een random image word gedraaid en getoond. hier het script: rotate.php
PHP: 
<?php
$images = array(1=>'art.png','dark.png', 'elf.png');
$random_image = mt_rand('1', '3');
$degrees = mt_rand("-50", "50");
$filename = $images[$random_image];

    header('Content-type: image/png filename="plaatje"');
    $source = imagecreatefrompng($filename);
    $rotate = imagerotate($source, $degrees, -1); // -1 will cause the bg color as white
    imagealphablending($rotate, true);
    imagesavealpha($rotate, true);
    imagepng($rotate, $image[$random_image]);
?>
als je het niet snapt, maakt niet uit. in de header word er gezegd dat er een png image word gemaakt met de naam "plaatje". die naam wil ik straks hebben.

ik heb nu een andere pagina gemaakt de deze pagina opvraagt, dat werk allemaal. (als je met de muis over een plaatje gaat word de z-index veranderd waardoor hij vooraan komt)
HTML: 
<html>
<head>
	<title>ewoud's website</title>
	<style>
	</style>
	<script language='javascript'>
	function setZposition(id, z) 
	{
		var e=document.getElementsByTagName("div");
		for(var i=0;i<e.length;i++){e[i].style.zIndex = '1';}
		document.getElementById(id).style.zIndex = z;
	}
	</script>
</head>
<body onload="setZposition('layer1', '4')">
	<div id='layer1' style='position:absolute; top:0px; left:0px; z-index:2;' onMouseOver='setZposition("layer1", "3")'>
	<img src='rotate.php' alt='doet het niet' id='img1' />
	</div>
	<div id='layer2' style='position:absolute; top:120px; left:50px; z-index:2;' onMouseOver='setZposition("layer2", "3")'>
	<img src='rotate.php' alt='doet het niet' id='img2'/>
	</div>
	<div id='layer3' style='position:absolute; top:20px; left:100px; z-index:2;' onMouseOver='setZposition("layer3", "3")'>
	<img src='rotate.php' alt='doet het niet' id='img3'/>
	</div>
	<div id='output' style='position:absolute; top:100px; left:300px;'>
	</div>
</body>
</html>

nu wil ik dat al je op een div (of plaatje) klikt dat hij dan vergroot word en recht komt te staan. het makkelijkste leek me om de naam van het plaatje op te halen en die dan te tonen. (als iemand een betere manier heeft is dat ook goed)

dus hoe kom ik bij de naam die gemaakt is door de header in het php bestand?

alvast bedankt
 
Niet.

Tenzij je zgn. 'AJAX' gebruikt om je plaatje op te halen (want dan kan je bij de headers) - anders zal het niet gaan. Het request naar het plaatje wordt gedaan door de browser, niet door jou javascriptcode.

Nu, mocht je dit dus wel met AJAX willen doen: er is een getRequestHeader() en getRequestHeaders() meth in xmlhttp (meen ik), dus daar kan je even op google'n.


:thumb:
 
ik ben al wat met ajax bezig geweest, maar hoe kun je ajax hier voor dan gebruiken?
 
Ah, my bad. Het was getResponseHeader.

In ieder geval, het idee is dus om een call naar je file te maken. Wat je dan terug krijgt, is data. Pure image-data. Nu, omdat je image dynamisch is, kan je daar natuurlijk verder weinig mee. Wat echter wel kan, is het data:uri schema gebruiken.

Goed, het idee:
[JS]function showImage(imageLocation)
{
//maak ajax request naar imageLocation
//verkrijg getResponseHeader('Content-Type')
//verkrijg data:uri data

//document.write of DOM het in je <img> tag. (of DOM een image tag)
}[/JS]Nu, dit lijkt mischien wat apart, maar hier is wat voorbeeld code:

image.php
PHP: 
<?php
   //header met content-type en name
   //imgpng je plaatje NIET, maar in plaats daarvan gooi je een base64() over de data:

   $c = file_get_contents('image.png');
   echo base64_encode($c);

?>

js functie[JS]function showImage(img, imgType, async)
{
var x = new XMLHttpRequest(); //ie support?

x.open("GET", img, async);
x.overrideMimeType(imgType+ '; charset=x-user-defined'); /* geen XML, maar image formaat. Overgens weet ik niet zeker of dit nodig is. */

x.onreadystatechange = function()
{
if(x.readyState == 4)
{
var contentType = x.getResponseHeader("Content-Type"); //denk ik
var dataUri = x.responseText;

doeIets(contentType, dataUri);
}
}
}

function doeIets(ct, du)
{
//doe iets met je data:

var nImg = document.createElement('img');

nImg.setAttribute('title', 'dit is een plaatje, het content type is ' + ct);
nImg.setAttribute('src', du);

document.body.appendChild(nImg);
}
[/JS]

Overgens is dit allemaal uit mn hoofd, dus je zult zelf wat moeten gaan experimenteren. Dit is waarschijnlijk nog niet echt eerder gedaan, dus tsja. Hint: gebruik het Firefox foutenconsole, en eventueel firebug.



nuttige links: (lezen dus)
https://developer.mozilla.org/En/AJAX
http://en.wikipedia.org/wiki/Data_URI_scheme
 
Laatst bewerkt:
image.phpa
PHP Code:
<?php
//header met content-type en name
//imgpng je plaatje NIET, maar in plaats daarvan gooi je een base64() over de data:

$c = file_get_contents('image.png');
echo base64_encode($c);

?>
Klik om te vergroten...
kun je hiermee ook imagerotate() gebruiken om het plaatje te draaien?
 
Laatst bewerkt:
ik heb nu het volgende, het is wat anders dan jij had bedacht maar het werkt behalve het draaien.
PHP: 
<html>
<head>
	<META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
	<title>ewoud's website</title>
	<style>
	</style>
	<?php
	$images = array(1=>'art.png','dark.png', 'elf.png');
	function data_uri($file, $mime) 
	{  
	  $contents = file_get_contents($file);
	  $base64   = base64_encode($contents); 
	  return ('data:' . $mime . ';base64,' . $base64);
	}
	?>
	<script language='javascript'>
	function setZposition(id, z) 
	{
		var e=document.getElementsByTagName("div");
		for(var i=0;i<e.length;i++){e[i].style.zIndex = '1';}
		document.getElementById(id).style.zIndex = z;
		document.getElementById("output").style.visiblility="hidden";
	}
	function large(image_name)
	{
	document.getElementById('output').style.visibility="visible";
	document.getElementById('output_image').src= image_name;
	var e=document.getElementsByTagName("div");
		for(var i=0;i<e.length;i++){e[i].style.zIndex = '1';}
	document.getElementById('output_image').style.zIndex = '4';
	}
	function hide(id)
	{
	document.getElementById(id).style.visibility="hidden";
	}
	</script>
</head>
<body>

	<div id='layer1' style='position:absolute; top:0px; left:0px; z-index:2;' onMouseOver='setZposition("layer1", "3")'>
	<img src='<?php
				$random_image = mt_rand('1', '3');
				echo data_uri($images[$random_image], "image/png");
			  ?>' alt='doet het niet' id='img1' onClick='large("<?php echo $images[$random_image]; ?>")'/>
	</div>
	<div id='layer2' style='position:absolute; top:120px; left:50px; z-index:2;' onMouseOver='setZposition("layer2", "3")'>
	<img src='<?php
				$random_image = mt_rand('1', '3');
				echo data_uri($images[$random_image], "image/png");
			  ?>' alt='doet het niet' id='img2' onClick='large("<?php echo $images[$random_image]; ?>")'/>
	</div>
	<div id='layer3' style='position:absolute; top:20px; left:100px; z-index:2;' onMouseOver='setZposition("layer3", "3")'>
	<img src='<?php
				$random_image = mt_rand('1', '3');
				echo data_uri($images[$random_image], "image/png");
			  ?>' alt='doet het niet' id='img3' onClick='large("<?php echo $images[$random_image]; ?>")'/>
	</div>
	<div id='output' style='visibility:hidden; position:absolute; top:10px; left:10px; z-index:5;' >
	<img src='' id='output_image' style='width: 200%; z-index:5;' onclick='hide("output")' />
	</div>
</body>
</html>

zie hier voor beeld : www.ecross.nl/bedankt.php
 
Laatst bewerkt:
Ik ben niet heel erg van de php, maar imgpng() ouput een plaatje direct, dus ik denk niet dat je m via deze manier kan draaien.

Maargoed, ik zie door de bomen je script niet meer. En denk dat wat je wil bereiken ook op een makkelijkere manier kan.

Nu, wat is precies het idee? Ik zie op die bedankt.php een werkend iets. Is dat het, of moet er nog meer gebeuren?



:thumb:
 
hier een uitleg van mijn script: (onder elk stukje staat steeds de uitleg)

HTML: 
<html>
<head>
    <META HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
    <title>ewoud's website</title>
dit lijk me wel duidelijk,

PHP: 
    <?php
    $images = array(1=>'art.png','dark.png', 'elf.png');
/**** deze functie mag geschrapt worden: ****/
    function data_uri($file, $mime) 
    {  
      $contents = file_get_contents($file);
      $base64   = base64_encode($contents); 
      return ('data:' . $mime . ';base64,' . $base64);
    }
/* einde schrappen */
    ?>
hier word een array gemaakt met de plaatjes, deze word later gebruikt om een random plaatje te kiezen.
daarna komt een functie (data_uri) waarvan ik nu opeens zie dat die overbodig is, die kun je dus schrappen.
[JS] <script language='javascript'>
function setZposition(id, z)
{
var e=document.getElementsByTagName("div");
for(var i=0;i<e.length;i++){e.style.zIndex = '1';}
document.getElementById(id).style.zIndex = z;
document.getElementById("output").style.visiblility="hidden";
}[/JS]
met deze javascript functie kun je de z-index van een plaatje wijzigen, dit gebeurd als je met je muis over een plaatje gaat.
[JS]
function large(image_name)
{
document.getElementById('output').style.visibility="visible";
document.getElementById('output_image').src= image_name;
var e=document.getElementsByTagName("div");
for(var i=0;i<e.length;i++){e.style.zIndex = '1';}
document.getElementById('output_image').style.zIndex = '4';
}[/JS]
met deze functie word het grote plaatje geopend, het plaatje word op gegeven als argument.
[JS]
function hide(id)
{
document.getElementById(id).style.visibility="hidden";
}
</script>[/JS]
en deze functie laat de grote afbeelding weer verdwijnen, dit gebeurd als je er op klikt.
HTML: 
</head>
<body>
duidelijk
HTML: 
    <div id='layer1' style='position:absolute; top:0px; left:0px; z-index:2;' onMouseOver='setZposition("layer1", "3")'>
    <img src='<?php
                $random_image = mt_rand('1', '3');
                echo $images[$random_image];
              ?>' alt='doet het niet' id='img1' onClick='large("<?php echo $images[$random_image]; ?>")'/>
    </div>
hier word een div gemaakt en met css gepositioneerd, als je met je muis over de div gaat word "setZposition" geactiveerd en word de laag naar voren gehaald,
in de div zit een plaatje, de src is random en word bepaald door php, eerst gebruikte ik de functie data_uri() maar ik bedenk me net dat je ook gewoon het pad kan opgeven :p
als je op het plaatje klikt word de javascript functie "large" aangeroepen die een groot plaatje laat zien, als argument word de url naar het plaatje mee gegeven die we net ook hebben gebruikt.
HTML: 
    <div id='layer2' style='position:absolute; top:120px; left:50px; z-index:2;' onMouseOver='setZposition("layer2", "3")'>
    <img src='<?php
                $random_image = mt_rand('1', '3');
                echo $images[$random_image];
              ?>' alt='doet het niet' id='img2' onClick='large("<?php echo $images[$random_image]; ?>")'/>
    </div>
    <div id='layer3' style='position:absolute; top:20px; left:100px; z-index:2;' onMouseOver='setZposition("layer3", "3")'>
    <img src='<?php
                $random_image = mt_rand('1', '3');
                echo data_uri($images[$random_image], "image/png");
              ?>' alt='doet het niet' id='img3' onClick='large("<?php echo $images[$random_image]; ?>")'/>
    </div>
meer van het zelfde alleen dan anders gepositioneerd.
HTML: 
    <div id='output' style='visibility:hidden; position:absolute; top:10px; left:10px; z-index:5;' >
    <img src='' id='output_image' style='width: 200%; z-index:5;' onclick='hide("output")' />
    </div>
in deze div zit het grote plaatje, de div is normaal niet zichtbaar (visibility:hidden; ) alleen als er op een plaatje word geklikt word hij door javascript weer zichtbaar gemaakt, ook word met javascript de src van het plaatje ingesteld. als op het plaatje word geklikt word de div weer verstop (door de hide() functie).
HTML: 
</body>
</html>
ook duidelijk.

eerst waren mijn plaatjes gedraait maar bij nader inzien werkt dit ook wel. bedankt :)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan