Custom web control : imagesaleatoire

Télécharger le projet
Commenter

Description

Ce controle vous permet d'avoir d'ajouter dans votre site une image choisis au hasard dans un fichier xml.
Ce controle ressemble au controle Adrotator, on le lie à un fichier XML et une image arrive au hasard.

A l'interieur du zip se trouve le commentaire du code (et des fautes d'orthographes) en format word

Source / Exemple : 


'Il faut rajouter la dll contenu dans le zip dans le dossier bin de votre application
'et mettre ce code dans votre page aspx : 

<%@ Register TagPrefix="cyril" Namespace="Cyril.Controls" Assembly="Cyril" %>

<cyril:imagealeatoire id=ImageAleatoire1 
		runat="server" 
		Width="310px" 
		CssClass="ImageAleatoire"
		XmlFile="data/ImageAleatoire.xml"
		/>

'Le code CSS correpondant est : 

<style>
		
	.ImageAleatoire {
		PADDING-RIGHT: 10px;
		PADDING-LEFT: 10px;
		PADDING-BOTTOM: 25px;
		MARGIN: 0px;
		WIDTH: 180px;
		PADDING-TOP: 0px;
    } 
    
    .ImageAleatoire DT {
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 9px; 
		BACKGROUND: url(Styles/Base/Menu/left.gif) no-repeat left top; 
		PADDING-BOTTOM: 0px; MARGIN: 25px 0px 0px; 
		PADDING-TOP: 0px; 
		HEIGHT: 25px; 
	} 
	
	.ImageAleatoire DT SPAN { 
		PADDING-RIGHT: 0px; 
		DISPLAY: block; 
		PADDING-LEFT: 0px; 
		FONT-WEIGHT: bold; 
		FONT-SIZE: 90%; 
		BACKGROUND: url(Styles/Base/Menu/right.gif) right top; 
		PADDING-BOTTOM: 0px; 
		MARGIN: 0px; 
		VERTICAL-ALIGN: middle; 
		WIDTH: 100%; 
		TEXT-INDENT: 10px; 
		LINE-HEIGHT: 25px; 
		PADDING-TOP: 0px; 
		WHITE-SPACE: nowrap; 
		HEIGHT: 25px;
	} 
	
	.ImageAleatoire DD { 
		BORDER-RIGHT: #b7ae88 1px solid; 
		BORDER-TOP: #b7ae88 1px solid; 
		MARGIN: 0px; 
		BORDER-LEFT: #b7ae88 1px solid; 
		BORDER-BOTTOM: #b7ae88 1px solid;
	} 
	
	.ImageAleatoire UL { 
		PADDING-RIGHT: 8px; 
		PADDING-LEFT: 8px; 
		PADDING-BOTTOM: 5px; 
		MARGIN: 0px; 
		PADDING-TOP: 5px; 
		LIST-STYLE-TYPE: none;
	}
	
	.ImageAleatoire A { 
		COLOR: #663300; 
		TEXT-DECORATION: none;
	} 
	
	.ImageAleatoire A:hover { COLOR: #ff0000 }
	
	.ImageAleatoire LI { 
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 0px; 
		PADDING-BOTTOM: 5px; 
		MARGIN: 0px; 
		PADDING-TOP: 5px; 
		LIST-STYLE-TYPE: none; 
		TEXT-ALIGN: justify;
	} 
	
	.ImageAleatoire P { 
		PADDING-RIGHT: 0px; 
		PADDING-LEFT: 0px; 
		PADDING-BOTTOM: 0px; 
		MARGIN: 0px; 
		PADDING-TOP: 0px; 
		TEXT-ALIGN: center;
	} 
	
	.ImageAleatoire IMG { 
		BORDER-RIGHT: #b7ae88 1px solid; 
		BORDER-TOP: #b7ae88 1px solid; 
		OVERFLOW: hidden; 
		BORDER-LEFT: #b7ae88 1px solid; 
		WIDTH: 140px; 
		BORDER-BOTTOM: #b7ae88 1px solid; 
		TEXT-ALIGN: center 
	}
	
</style>

Le code XML (data/ImageAleatoire.xml)

<?xml version="1.0" encoding="utf-8" ?>
<ImageAleatoire>
	<Proprietes>
	</Proprietes>
	<Photos>
		<photo>
			<Nom>Image 1</Nom>
			<Url>images/ImageAleatoire/(1).JPG</Url>
			<Description>Description de l'image N°1</Description>
			<Alt>Alt1</Alt>
		</photo>
		<photo>
			<Nom>Image 2</Nom>
			<Url>images/ImageAleatoire/IMG_0257.jpg</Url>
			<Alt>Alt2</Alt>
			<Description>Description de l'image N°2</Description>
		</photo>
	</Photos>
</ImageAleatoire>

Conclusion :


J'ai mis ici le code de l'integration du controle, je suis en train d'ecrire l'article qui explique le code de ce controle.
Il existe une autre propriété : HtmlTemplate cette propriété attent un nom de fichier HTML qui définit la structure du controle, si cette propriété est omise le fichier HTML par défaut est ce code la :

<div class="[Class]">
<dt>
<span>Images Aléatoires</span>
</dt>
<dd>
<ul>
<li>
<p>
<img src="[URL]" alt="[ALT]" />
</p>
</li>
<li>
[Description]
</li>
</ul>
</dd>
</div>

vous pouvez trouver le code complet ainsi que sa dll dans le zip.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (jesusonline)