Est-il possible de définir l'équivalent d'un attribut src d'une balise img en CSS?
Est-il possible de définir la valeur de l'attribut src en CSS? Actuellement, ce que je fais, c'est:
<img src="pathTo/myImage.jpg"/>
et je veux que ce soit quelque chose comme ça
<img class="myClass" />
.myClass {
some-src-property: url("pathTo/myImage.jpg");
Je veux faire ceci sans en utilisant les propriétés background ou background-image: en CSS.
Utilisez content:url("image.jpg") .
Solution de travail complète (Live Demo):
<!doctype html>
<style>
.MyClass123{
content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>
<img class="MyClass123"/>Testé et fonctionnel:
- Chrome 14.0.835.163
- Safari 4.0.5
- Opera 10.6
Testé et ne fonctionne pas :
- FireFox 40.0.2 (en observant les outils réseau de développeur, vous pouvez voir que l'URL est chargée, mais que l'image ne s'affiche pas)
- Internet Explorer 11.0.9600.17905 (l'URL ne se charge jamais)
Il existe une solution que j'ai découverte aujourd'hui (fonctionne dans IE6 +, FF, Opera, Chrome):
<img src='willbehidden.png'
style="width:0px; height:0px; padding: 8px; background: url(newimage.png);">
Comment ça fonctionne:
- L'image est réduite jusqu'à ne plus être visible par la largeur et la hauteur.
- Ensuite, vous devez "réinitialiser" la taille de l'image avec un remplissage. Celui-ci donne une image 16x16. Vous pouvez bien sûr utiliser padding-left/padding-top pour créer des images rectangulaires.
- Enfin, la nouvelle image est placée à l’aide de l’arrière-plan.
- Si la nouvelle image d'arrière-plan est trop grande ou trop petite, je vous recommande d'utiliser
background-size, par exemple:background-size:cover;, qui adapte votre image à l'espace alloué.
Cela fonctionne aussi pour submit-input-images, elles restent cliquables.
Voir la démonstration en direct: http://www.audenaerde.org/csstricks.html#imagereplacecss
Prendre plaisir!
j'ai utilisé la solution div vide, avec ce CSS:
#throbber {
background-image: url(/Content/pictures/ajax-loader.gif);
background-repeat: no-repeat;
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
}
HTML:
<div id="throbber"></div>
J'ai trouvé un meilleur moyen que les solutions proposées, mais il utilise effectivement l'image de fond. Méthode conforme (ne peut pas confirmer IE6) Crédits: http://www.kryogenix.org/code/browser/lir/ =
<img src="pathTo/myImage.jpg"/>
Le CSS:
img[src*="pathTo/myImage.jpg"] {
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
width: 20px;
display:inline-block;
padding: 20px 0 0 0;
height: 0px !important;
/* for IE 5.5's bad box model */
height /**/:20px;
}
L'ancienne image n'est pas vue et la nouvelle est vue comme prévu.
La solution soignée suivante ne fonctionne que pour webkit
img[src*="pathTo/myImage.jpg"] {
/* note :) */
content:'';
display:inline-block;
width: 20px;
height: 20px;
background-image: url("mynewimg.jpg"); /* lets say 20x20 */
}
Ils ont raison. IMG est un élément de contenu et CSS concerne le design. Mais qu'en est-il lorsque vous utilisez des éléments de contenu ou des propriétés à des fins de conception? J'ai des IMG sur mes pages Web qui doivent changer si je change de style (le CSS).
C'est une solution pour définir la présentation IMG (pas vraiment l'image) en style CSS.
- créer un 1x1 transparent gif ou png.
- Attribuez la propriété "src" de IMG à cette image.
- Définissez la présentation finale avec "background-image" dans le style CSS.
Il fonctionne comme un charme :)
Voici une très bonne solution -> http://css-tricks.com/replace-the-image-in-an-img-with-css/
Pro (s) et Con (s):
(+) fonctionne avec des images vectorielles ayant une largeur/hauteur relative (une chose que RobAanswer ne gère pas)
(+) est multi-navigateur (fonctionne aussi pour IE8 +)
(+) il utilise uniquement CSS. Donc, pas besoin de modifier l'img src (ou si vous n'avez pas d'accès/ne voulez pas changer l'attribut img src déjà existant).
(-) désolé, il utilise l'attribut css de fond :)
Vous pouvez définir 2 images dans votre code HTML et utiliser display: none; pour déterminer celle qui sera visible.
Non, vous ne pouvez pas définir l'attribut image src via CSS. Comme vous le dites, le plus proche que vous puissiez obtenir est background ou background-image. De toute façon, je ne recommanderais pas de le faire car cela serait quelque peu illogique.
Cependant, une solution CSS3 est à votre disposition si les navigateurs que vous ciblez peuvent l’utiliser. Utilisez content:urlcomme décrit dans la réponse de Pacerier . Vous pouvez trouver d'autres solutions inter-navigateurs dans les autres réponses ci-dessous.
Placez plusieurs images dans un conteneur "contrôlant" et modifiez plutôt la classe du conteneur. En CSS, ajoutez des règles pour gérer la visibilité des images en fonction de la classe du conteneur. Cela produira le même effet que si vous changiez la propriété img src d'une seule image.
HTML:
<span id="light" class="red">
<img class="red" src="red.png" />
<img class="yellow" src="yellow.png" />
<img class="green" src="green.png" />
</span>
CSS:
#light { ... }
#light * { display: none; } // all images are hidden
#light.red .red { display: inline; } // show red image when #light is red
#light.yellow .yellow { display: inline; } // .. or yellow
#light.green .green { display: inline; } // .. or green
Notez que toutes les images seront préchargées, comme avec CSS backround-images, mais contrairement à la modification de img src via JS.
Je laisserais quelques données en HTML, mais il vaut mieux définir le src en CSS:
<img alt="Test Alt text" title="Title text" class="logo">
.logo {
content:url('../images/logo.png');
}
Autant que je sache, VOUS NE POUVEZ PAS. CSS concerne le style et l'image est le contenu.
Manière alternative
.myClass {
background: url('/img/loading_big.gif');
}
<div class="myClass"></div>
Pour réitérer une solution antérieure et insister sur la mise en œuvre CSS pure, voici ma réponse.
Une solution Pure CSS est nécessaire dans les cas où vous achetez du contenu depuis un autre site et vous ne contrôlez donc pas le code HTML fourni. Dans mon cas, j'essaie de supprimer la marque du contenu source sous licence afin que le titulaire de la licence n'ait pas à faire de publicité pour l'entreprise auprès de laquelle il achète le contenu. Par conséquent, je supprime leur logo tout en conservant le reste. Je dois noter que cela fait partie du contrat de mon client.
{ /* image size is 204x30 */
width:0;
height:0;
padding-left:102px;
padding-right:102px;
padding-top:15px;
padding-bottom:15px;
background-image:url(http://sthstest/Style%20Library/StThomas/images/rhn_nav_logo2.gif);
}
Je sais que c’est une question très ancienne, mais aucune réponse ne permet de comprendre pourquoi cela ne peut jamais être fait. Bien que vous puissiez "faire" ce que vous cherchez, vous ne pouvez pas le faire de manière valide. Pour avoir une balise img valide, elle doit avoir les attributs src et alt.
Donc, toutes les réponses donnant un moyen de le faire avec une balise img qui n'utilise pas l'attribut src encouragent l'utilisation de code non valide.
En bref: ce que vous recherchez ne peut pas être fait légalement dans la structure de la syntaxe.
Source: Validateur W3
Ou vous pouvez faire ce que j'ai trouvé sur le truc interweb.
https://robau.wordpress.com/2012/04/20/override-image-src-in-css/
<img src="linkToImage.jpg" class="Egg">
.Egg {
width: 100%;
height: 0;
padding: 0 0 200px 0;
background-image: url(linkToImage.jpg);
background-size: cover;
}
Donc, masquer efficacement l'image et réduire l'arrière-plan. Oh, qu'est-ce qu'un hack, mais si vous voulez une balise IMG avec un texte alternatif et un arrière-plan qui puisse évoluer sans utiliser JavaScript?
Dans un projet sur lequel je travaille maintenant, j'ai créé un bloc de héros twig template
<div class="hero">
<img class="image" src="{{ bgImageSrc }}"
alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>
Vous pouvez le convertir avec JS:
$('.image-class').each(function(){
var processing = $(this).attr('src');
$(this).parent().css({'background-image':'url('+processing+')'});
$(this).hide();
});
Si vous ne souhaitez pas définir une propriété d'arrière-plan, vous ne pouvez pas définir l'attribut src d'une image en utilisant uniquement CSS.
Sinon, vous pouvez utiliser JavaScript pour faire une telle chose.
En utilisant CSS, cela ne peut pas être fait. Toutefois, si vous utilisez JQuery, une solution comme celle-ci fera l'affaire:
$("img.myClass").attr("src", "http://somwhere");
Si vous essayez d'ajouter une image dans un bouton de manière dynamique en fonction du contexte de votre projet, vous pouvez utiliser le fichier? prendre pour référencer la source en fonction d'un résultat. Ici, j'utilise mvvm design pour laisser ma valeur Model.Phases [0] déterminer si je veux que mon bouton soit rempli avec les images d'une ampoule ou non en fonction de la valeur de la phase d'éclairage.
Pas sûr que cela aide. J'utilise JqueryUI, Blueprint et CSS. La définition de la classe devrait vous permettre de styliser le bouton en fonction de ce que vous souhaitez.
<button>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
<img class="@(Model.Phases[0] ? "light-on": "light-off")" src="@(Model.Phases[0] ? "~/Images/LightBulbOn.png" : "~/Images/LightBulbOff.png")"/>
Code HTML:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css destination" />
</head>
<body>
<!-- click-able pic with link -->
<a href="site you want">
<!-- Take the off if you don't want click-able link -->
<h1 id(or class)="nameOfClassorid">
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
Css Code:
span {
display: none;
}
h1 id or class {
height: of pic;
width: of pic;
/* Only flaw (so far) read bottom */
background-image:url(/* "image destination" */);
}
h1 id or class:hover {
/* Now the awesome part */
background-image:url(/* 'new background!!!' */);
}
J'ai étudié le html après l'école pendant quelques jours et je voulais savoir comment faire cela. Découvrez le fond et ensuite mettre 2 et 2 ensemble. Cela fonctionne à 100%, j'ai vérifié, sinon assurez-vous de remplir les éléments nécessaires !!! Nous devons spécifier la hauteur, car sans cela, il n'y aurait rien !!! Je vais laisser cette base Shell, vous pouvez ajouter.
Exemple:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<a href="http:localhost">
<h1>
<span>Text that is not important</span>
</h1>
</a>
</body>
</html>
span {
display: none;
}
h1 {
height: 100px;
width: 100px;
background-image:url("http://linuxlog.org/wp-content/uploads/2011/01/[email protected]");
}
h1:hover {
height: 300px;
width: 300px;
background-image:url("http://cdn.css-tricks.com/images/ads/wufoo-600x600-red.png");
}
P.S. Oui je suis un utilisateur Linux;)
Toute méthode basée sur background ou background-image est susceptible d’échouer lorsque l’utilisateur imprime le document avec "impression contexte couleurs et images" désactivé. Ce qui est malheureusement la valeur par défaut du navigateur.
La seule méthode compatible avec l'impression et compatible avec plusieurs navigateurs est celle proposée par Bronx.
J'ajouterais ceci: l'image d'arrière-plan pourrait également être positionnée avec background-position: x y; (x horizontal et vertical). (..) Mon cas, CSS:
(..)
#header {
height: 100px;
background-image: url(http://.../head6.jpg);
background-position: center;
background-repeat: no-repeat;
background-color: grey;
(..)
}
(...)