Afbeeldingen met ronde hoeken maken ??

[schuurar]

Beste forum,

Ik heb een slideshow op mijn site met wat foto's.(zie onderstaande code)
Nu is mijn vraag of je die code zo kan aanpassen dat de afbeeldingen ronde hoeken krijgen.

Hoop dat iemand me kan helpen.
Bedankt vast.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow div.active');

if ( $active.length == 0 ) $active = $('#slideshow div:last');

var $next = $active.next().length ? $active.next()
: $('#slideshow div:first');

$active.addClass('last-active');

$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}

$(function() {
setInterval( "slideSwitch()", 7000 );
});
</script>

<style type="text/css">
/*** maak de hoogte en breedte gelijk aan je afbeeldingen **/
#slideshow {
position:relative;
height:487px;
width:487px;
}
#slideshow .slide {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow div.active {
z-index:10;
opacity:1.0;
}
#slideshow div.last-active {
z-index:9;
}
</style>

<div id="slideshow">
<div class="slide active"><img src="http://mijnsite.nl/fotogesch/ges1.jpg" alt="Slideshow Image 1" /></div>
<div class="slide"><img src="http://mijnsite.nl/fotogesch/ges2.jpg" alt="Slideshow Image 2" /></div>

</div>

 

[Wesleyyyy]

Dit kan je doen dmv. css: border-radius

 

[schuurar]

Beste Wesleyyyy,

Bedankt voor het reageren.
Dit geheel is niet te volgen voor mij sorry. Ben daar te onervaren in. Zie wel dat het kan dus is dat goed nieuws.
Zou je me kunnen helpen hiermee ?

 

[NewbiProgrammer]

Je HTML bevat een klasse slide. Deze slide kan je opmaak geven door er css aan te koppelen.

In css wordt een punt gebruikt om een klasse aan te duiden. Een hekje om een id aan te duiden. Bijvoorbeeld:

<div id="mijnDiv"></div>
<div class="mijnDiv"></div>

#mijnDiv {
    .. 
} 

.mijnDiv {
..
}

Het eerste stukje css wordt toegepast op het bovenste html element (met het id). Het onderste stukje css wordt toegepast op het onderste html element (met de klasse).

In jouw geval heb je een div element in jouw html met een klasse slide. Die kunnen we ronde hoeken geven. Als we er dan ook nog voor zorgen dat hij een overflow: hidden krijgt (als zijn kinderen groter zijn dan hem worden ze afgekapt), dan moet het kloppen.

.slide {
     overflow: hidden;
     border-radius: 15px /* 15px gerond op alle hoeken */
}

Oh, voeg dit toe tussen de style-tags (deze staan al in je document):

<style type="text/css">...</style>

Ik heb het niet getest, maar ik hoop dat het werkt.

Groeten,
Newbi

 

[schuurar]

dank je.
ik ga eens kijken wat ik met deze uitleg kan.

 

[schuurar]

Het is me gelukt met een beetje "spelen" van de regels!!
Super bedankt.