Hover in php

Status
Niet open voor verdere reacties.
E

Eibers

Gebruiker
Lid geworden
11 dec 2014
Berichten
88
Wat ik graag wil is een fotootje op een webpagina, waarbij een grotere geprojecteerd wordt zodra ik de muis daarover beweeg.
Na wat googelen kwam ik op de volgende code:
Code: 
<!DOCTYPE html>
<html lang="nl">

  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type='text/css'> 
	div#foto	{
		position: absolute;
		left: 10%;
		top: 10%;
		width: 25%;
	}
	#groot	{
		position: relative; 
	}
	#groot:hover	{
		content: ' ';
		background-image: url(../<?php$pad?>);
		position: absolute; 
		left: 35%; 
		top: 11%; 
		width: 50%; 
	}
	</style>
  </head>
  
<body>
<?php 
	echo "<div id='foto'>";
	$pad="http://localhost/plaatje.jpg";
	echo "<a id='groot' href='#'>
			<img src='$pad' style='width: 40%; padding-bottom: 5px; border-ratius: 15px;'>
			<div><img src='$pad'>
			</div></a><br>";
	echo "</div>";
?>	
</body>
Dit levert het volgende resultaat:
Hover.JPG

Hoe krijg ik het gewenste effect?
 
Wat heeft dit met PHP te maken? PHP is geen opmaaktaal....
Je kan in jouw voorbeeld die PHP er gewoon uitslopen, als je er toch een voorwaardes aan hangt.

Ik zou in je CSS sowieso je variabele even echo'en want nu doe je er niks mee.
 
Waarom php?
Omdat dit (uiteraard) een deeltje is van een groter geheel.
Niet alleen maar plaatje.jpg, maar diverse mogelijkheden, een variabele, afhankelijk wat er gekozen is.
etc.
Maar met de rest hoef ik jullie niet te vermoeien. Dat is niet de vraag.
 
Lappen met HTML-code zou ik bij voorkeur altijd buiten PHP laten.
Je kan prima tussentijd even een echo'tje openen voor een functie of variabele.
Voornamelijk omdat je code overzichtelijker is, en je niet met het geklooi van escaping zit als je " of ' gebruikt.

PHP: 
<?php
$bla = "Hallo";
?>
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;"><?php echo $bla; ?></p>

</body>
</html>

Je kan zelfs de shorthand notatie <?=$bla?> gebruiken.
Pas dit ook even toe op je CSS en wie weet werkt het dan wel goed.
Want dit gaat niet werken omdat je niks output:

Code: 
#groot:hover	{
		/* wat andere properties*/
		background-image: url(../<?php$pad?>);
	}
 
Met Javascript, zoiets als dit
Code: 
<style>
#foto  {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  padding: 5px;
  border: 1px dotted silver;
}
#klein {
  width: 30%;
  margin-bottom: 15px;
}
#klein:hover {
  cursor: pointer; /* alleen voor pijltje */
}
#klein img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}
#groot  {
  display: none; /* via JS wordt het display:block */
  width: 100%; 
}
#groot img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}
</style>

in de body:

<?php
$pad = "http://localhost/plaatje.jpg";
echo "<div id='foto'>
<div id='klein'>
<img src='" . $pad . "' alt=''>
</div>
<div id='groot'>
<img src='" . $pad . "' alt=''>
</div><br>
</div>";
?>

<script>
var groot = document.getElementById("groot");
document.getElementById("klein").addEventListener("mouseenter", function() {
  groot.style.display = "block";
}); 
document.getElementById("klein").addEventListener("mouseleave", function() {
  groot.style.display = "none";
});
</script>
 
Bedankt, Moderator. Tot hier lukt het.
Waar ik niet uitkom: het gaat om meerdere plaatjes.
Als ik de code wat uitbreid:
Code: 
<body>
<?php 
	for ($n=0; $n<4; $n++)	{
		$pad=$pic[$n];	//Het pad waar de foto staat
		echo "<div id='klein'><img src='$pad' alt='' class='startbeeld'>  
		</div>";  //startbeeld: uitlijnen van de kleine foto (grootte, padding e.d.)
		echo "<div id='groot'><img src='$pad' alt=''>
		</div><br>	";
	}	
?>

GEEN idee hoe ik dit op moet lossen.
Door het gebruik van een id ipv een class lukt dit waarschijnlijk niet.
 
Onthoud dat een ID uniek is, en een class meerdere keren gebruikt kan worden.
 
Is het een opdracht voor een opleiding?
 
Zoals php4u aangaf zal je met class'es moeten werken omdat een id uniek moet zijn.
In de style dit wijzigen: #klein wordt .klein / #groot wordt .groot / de volgende wijziging omdat je 4 plaatjes hebt
Code: 
.klein {
  width: 20%;
  display: inline-block;
  margin-bottom: 15px;
}

Hiermee kan je meerdere plaatjes een mouse-over geven.
Als je om een reden alles in de php (i.p.v. in de html) wilt zetten dan lukt dat wel.
Code: 
<?php
$pad = array(
  "http://www.example.nl/img-00.jpg",
  "http://www.example.nl/img-01.jpg",
  "http://www.example.nl/img-02.jpg",
  "http://www.example.nl/img-03.jpg"
);
$sz = count($pad);
?>

<div id='foto'>
  <?php for ($n=0; $n < $sz; $n++) { ?>
    <div class='klein'><img src='<?php echo $pad[$n] ?>' alt=''></div>
  <?php } ?>
  <div class='groot'><img src='<?php echo $pad[0] ?>' alt=''></div>
</div>

<script>
var klein = document.querySelectorAll("#foto .klein");
var groot = document.querySelector("#foto .groot");
var i;
for (i = 0; i < klein.length; i++) {
  klein[i].addEventListener("mouseenter", function() {
    groot.firstElementChild.src = this.firstElementChild.src;
    groot.style.display = "block";
  }); 
  klein[i].addEventListener("mouseleave", function() {
    groot.style.display = "none";
  });
}
</script>
 
De oplossing bevredigde niet helemaal.
Na enig verder zoeken ziet het er nu zo uit:

Code: 
<html lang="nl">

  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<style type='text/css'> 
	#foto  {
		position: absolute;
		top: 10%;
		left: 10%;
		width: 30%;
		padding: 5px;
		border: 1px dotted silver;
	}
	</style>
  </head>
  
<body>
<?php 
include "dbfuncties-s.php";

$pic=array();
$a=count($pic);

echo "<div id='foto'>";
for ($n=1; $n <= $a; $n++) { 
	$pad=$pic[$n]['pad'];
	echo "<img src='$pad' style='width: 60%; padding-bottom: 5px; border-ratius: 15px;' onmouseover='bigImg(this)' onmouseout='normalImg(this)'><br><br>";
}
?>
</div><br>

<script>
function bigImg(x) { 
  x.style.width = "160%";
  x.style.top = "5%";
}

function normalImg(x) {
  
  x.style.width = "60%";
}
</script>
 
Nog wat tips

Je gebruikt <!DOCTYPE html> (zie #1), dit is een html5 declaratie met meta charset="utf-8". Verder gebruik je percentages in de breedte (responsive), neem daarvoor een meta name="viewport" op. Het is slim om een 'normalizer' te gebruiken zodat je pagina in verschillende browsers er hetzelfde uit ziet. Alles bij elkaar iets als dit.
Code: 
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Mijn pagina</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap-reboot.min.css">
<style type='text/css'> 
#foto  {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 30%;
  padding: 5px;
  border: 1px dotted silver;
}
</style>
</head>
<body>
...
</body>
</html>

Een enkele quote voor html attributen is toegestaan, echter ongebruikelijk.
Voor dubbele quotes in de html zijn er deze mogelijkheden.
Code: 
// Variabele buiten de string
// Nadeel: leesbaarheid is wat minder
echo '<img src="' . $pad . '" style="..." ....><br><br>';

// of echo met komaa's
// Nadeel: gebruik een \, bij een komma in de tekst
echo '<img src="', $pad, '" style="..." ....><br><br>';

// of accolades, werkt alleen bij echo "...";
// Nadeel: gebruik een \" bij een dubbele quote
echo "<img src=\"{$pad}\" style=\"...\" ....><br><br>";

Bij de bovengenoemde mogelijkheden wordt in elke syntax highlighter netjes de code getoond, in tegenstelling tot "... $var ...".
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan