2017-10-19 2 views
0

Je souhaite que le code d'amorçage suivant affiche automatiquement une superposition pour deux des trois options contenues dans un champ de base de données. Ils sont VENDUS, CONTRAT, et NON.superposition automatique css en fonction du contenu du champ de la base de données

Je veux différentes superpositions pour VENDUE et du contrat, et pas de superposition pour NO

J'ai cherché pour les superpositions, la plupart des tutoriels ont sur les événements de vol stationnaire, et je suis perdu quant à la façon de le faire.

<div class="row"> 
<div class="col-md-6 col-md-offset-3"> 
<a href="listing_show.php?ID=<?php echo($Recordset1->getColumnVal("ID")); ?>"> 
<img src="images/<?php echo($Recordset1->getColumnVal("IMAGE")); ?>" class="img-responsive center-block sold" alt="<?php echo($Recordset1->getColumnVal("TITLE")); ?>"/> 
</a> 
</div><br><br> 
</div> 

Répondre

0

Je l'ai travaillé à travers deux vièles js sur d'autres questions à poser, si elle aide tout le monde est ici le code que j'ajouté ...

html J'ai ajouté une div miniature et une div légende sous l'image à la fois conditionnelle au contenu du champ de base de données.

<?php if($Recordset1->getColumnVal("SOLD") == "YES") { ?> 
<div class="caption post-content-sold"></div> 
<? } ?> 
<?php if($Recordset1->getColumnVal("SOLD") == "CON") { ?> 
<div class="caption post-content-contract"></div> 
<? } ?> 

Ensuite, dans le CSS j'ai ajouté du code pour faire la vignette relative, puis a ajouté deux classes de style l'image se rapportant au champ de base de données

.thumbnail { 
position: relative; 
} 

.post-content-sold { 
background: rgba(255, 255, 255, 0.8) none repeat scroll 0 0; 
opacity: 0.8; 
top:0; 
left:0; 
min-width: 100%; 
max-height: 98%; 
position: absolute; 
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/sold.png); 

} 
.post-content-contract { 
background: rgba(255, 255, 0, 1) none repeat scroll 0 0; 
opacity: 1; 
top:5%; 
left:5%; 
max-width: 50%; 
max-height: 50%; 
position: absolute; 
color: #ffffff; 
content:url(http://www.mtnlakerealty.com/contract.png); 

}