favourit knop.

  • Onderwerp starter Onderwerp starter baws
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.
B

baws

Terugkerende gebruiker
Lid geworden
9 apr 2010
Berichten
1.258
Hallo,

ik wil bij mijn site een knop laten zien als je over de afbeeldingen gaat om hem toe te voegen aan favorieten.

ik heb al de volgende code

Code: 
 .item 
 {  }	
.item a
 { text-decoration: none;  }
.item a img 
{  padding: 1px;}	
.item a span.favoriet
{ display:none; background: url('../../media/img/favourit2.PNG')  no-repeat; margin: -175px 0px  0 10px; width: 50px;height: 50px; position: relative; z-index: 100; opacity: 0.5; }
.item a:hover span.favoriet
{ display:block; }
.clear 
{ clear: both;}

nu komt de knop als ik over het plaatje ga linksboven in de hoek, maar nu is heel het plaatje een knop. ik wil dat alleen de knop van 50px bij 50px een knop is en niet heel de afbeelding.

de code heb ik van http://www.itsalif.info/content/show-play-icon-mouse-over-thumbnail-using-css die bedoelt is om een afspeel knop in het midden te plaatsen, heb hem een beetje aangepast.
 
Hoi,

Kan je ook je html even geven. Werkt makkelijker.
 
Code: 
echo "<div id=\"subafbeeldingen\">";

			$result3 = mysql_query("SELECT * FROM Afbeeldingen WHERE ImgId =$imgid  ORDER BY AfbeeldingPrior DESC");
			$i = 1;
			while($row3 = mysql_fetch_array($result3))
			{
				echo "<div id=\"subafbeelding\">";
				
				
				$subimg =  $row3['AfbeeldingUrl'];
				$subpath = "/media/img/badkamer/$subimg";
				?>
				<script>viewer.add('<?php echo $subpath ?>');</script>
				<a href="javascript:void(viewer.show(<?php echo $i ?>))">
				
						<div class="item">
						<a href="#" title="Opslaan">
						<img src="<?php echo $subpath; ?>" alt="Badkamer" /> 			<!-- De afbeelding -->
						<span class="favoriet"></span>									<!-- Favoriet knop -->
				</a>
			</div>
	$i ++;
				echo "</div>";
			}		
		echo "</div>";


dit is de div waar het inkomt.


het gedeelte :

Code: 
	<div class="item">
						<a href="#" title="Opslaan">
						<img src="<?php echo $subpath; ?>" alt="Badkamer" /> 			<!-- De afbeelding -->
						<span class="favoriet"></span>

is de afbeelding en de knop die er over zit.
 
Laatst bewerkt:
Hoi,

Ik had in afwachting van je html al een voorbeeld gemaakt: http://jsfiddle.net/QNaLT/1/
Ik zal je html eens bekijken en dan zien waar het misloopt


edit: Kan je mij de output geven zonder php code? Dus hetgeen wat je ziet als je de broncode van de website bekijkt?
 
Laatst bewerkt:
favorieat.jpgde knop moet alleen zichtbaar zijn als er met de muis over de afbeelding gaat zie bijlagen.
 
maar de knop staat goed, maar hij maakt nu heel de afbeelding bijvoorbeel 500 px x 500 px een link en niet alleen de knop 50 px x 50 px
ik denk dat het ligt aan display:block maar mijn kennis van css i beperkt
 
nee helaas er zit nog totaal geen beveiliging op dus als je nu iets aan klikt wordt het al verwijder/ gewijzigd in de database.
 
Dan zal je toch je output html moeten tonen.
Je geeft php code. Maar ik kan je enkel helpen als je me de html css doorgeeft. Maak desnoods een fiddle op jsfiddle.net
 
<html die zichtbaar is voor bezoekers

Code: 
<div id="subafbeelding">				<script>viewer.add('/media/img/badkamer/5.jpg');</script>
				<a href="javascript:void(viewer.show(1))">
				
						</a><div class="item"><a href="javascript:void(viewer.show(1))">
						</a><a href="#top" title="Opslaan">
						<img src="/media/img/badkamer/5.jpg" alt="Badkamer"> 			<!-- De afbeelding -->
						<span class="favoriet" onclick="return confirm('Deze badkamer toevogen?')"></span>									<!-- Favoriet knop -->
					
						</a>
						</div>
				
			</div>

als er op de knop gedrukt wordt moet #top gebeuren (om te testen of een aparte link werkt) andesr moet <a href="javascript:void(viewer.show(1))"> gedaan worden.

als ik nu op de knop druk komt er wel de melding Deze badkamer toevoegen maar wordt ik geredirect naar #top wat goed is.
maar als ik op de rest van de afbeelding klik wil ik naar het javascript view gedeelte uitvoeren.

mvg mijn css heb ik in startpost geplaatst.
 
Laatst bewerkt:
Hoi,

Ik heb een poging gedaan om je probleem aan te pakken.
Je code is wel zeer rommelig. Inline javascript zoals jij gebruikt word al jaren afgeraden. Ook doe je dingen die eigenlijk niet valid zijn.

Ik heb een stukje jquery gebruikt om een mogelijke oplossing te tonen: http://jsfiddle.net/BETVz/2/
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan