Im trying to select img tags based on the alt attribute to load proper background-image on mobile
the problem is not matter what combination of attribute selector I use it seems it doesnt work, I cant even select the tag I want with it
I used these
img[alt="Chelo Kebab"] {opacity: 0.5}
img[alt*="Chelo Kebab"] {opacity: 0.5}
img[alt^="Chelo Kebab"] {opacity: 0.5}
i used all combinations, capital, normal even I tried
img[alt] {opacity: 0.5}
but no success
also I tried to put parent class name before img
you can see the code Im working on in this address
here
Im trying to select each img tag
here is the proof that I write everything correct
UPDATE Its obvious now its a CACHeING problem, Im trying to solve
There is no problem with attribute-selectors for iamges in css:
img[alt="abc"] {
opacity: 0.8 !important;
}
img[alt="def"] {
opacity: 0.5 !important;
}
img[alt="ghi"] {
opacity: 0.3 !important;
}
img[alt] {
opacity: 0.1;
}
<img src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="abc" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="def" src="https://dummyimage.com/200x100/000/fff" /><br />
<img alt="ghi" src="https://dummyimage.com/200x100/000/fff" /><br />
Note that because you have a more general selector in your code (img[alt]) I added the !important to the properties to override the opacity in your general selector.
Related
Want to rotate one image to left, and then the other one to the right.
Something I really can't figure out why, the first part using last-child doesn't work, while the second works, any idea what the problem is?
Thanks!
<div>
<img scr="pic-a.jpg"></img>
<img scr="pic-b.jpg"></img>
</div>
img {
width: 45%;
transform: rotate(7deg);
&:last-child {
transform: rotate(-7deg);
}
}
/* the above doesn't work */
img {
width: 45%;
transform: rotate(-7deg);
&:first-child {
transform: rotate(7deg);
}
}
/* this works */
There must be something else messing up your code, as I tried to reproduce your error, it seems to work for me in both ways. Try it yourself.
One thing I also noticed was that your HTML is invalid. Your src attribute is misspelled and you don't need a closing img tag.
<div>
<img src="http://i.imgur.com/AzeiaRY.jpg"/>
<img src="http://i.imgur.com/AzeiaRY.jpg"/>
</div>
I have a circle+arrow next to a text in a CTA button and i'd like both to change color at the same time when hovering over either of them. Right now when hovering over the text the arrow does not change color, not sure how to write the :
<div class="cta-div">
<a class="cta-btn" href="#" role="button">SAVE NOW <i class="fa fa-
chevron-circle-right " style="font-size:34px;color:#efd43d; vertical
-align:middle; padding:0 0 3px;"></i></a>
</div>
sass rule:
.cta-btn, .fa-chevron-circle-right {
&:hover {
color: $btn-bkg-hover-color !important;
}
}
I have set this up and working in a fiddle: https://jsfiddle.net/roob/9Lsjstf7/1/
Any help is appreciated. If this is a duplicate post then please post a link.
You do not hover on them separately - you just hover on the anchor and when you do that you also hover the child so:
.cta-btn:hover, {
color: #e8e2bb !important;
.fa-chevron-circle-right {
color: #e8e2bb !important;
}
}
Not sure about the !important ... left it as you may need it for some reason.
I am trying to get the effect shown here https://www.kogevitamins.com/
Where you hover over the "learn more" link to get the opacity of the image to also change.
Thanks.
Edit:
Right now I have
for HTML
<img src="/images/pill.png" alt="description" id ="image" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
For jquery
$("#button").hover(function(){
$("#image").animate({opacity:1},300);
}).mouseout(function(){
$("#image").animate({opacity:0.6},300);;
});
It doesn't seem to work so far
Edit:
I have the following code recently updated but the hover on effect doesn't work for me. Heres a link to the thing I'm trying to get to work http://maninkorean.com/
<div class ="product-content">
<img class="imgClass" src="/images/pill.png" alt="description" />
<p> Daily Essentials </p>
<a id ="button" href="#">Learn More</a>
</div>
$("a#button, img").hover(function(){
$("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
$("img.imgClass").animate({opacity:0.6},300);;
});
img.imgClass{
opacity: 0.6
}
#button {
padding: 10px 24px;
background:#F15951;
border: medium none;
border-radius: 3px 3px 3px 3px;
color:white;
margin-top:50px;
margin-bottom:50px;
font-weight: bold;
}
You should be able to do this using jQuery with the following code:
$('#id of link you want to use to change opacity').hover(function() { $('#id of image that you want to change opacity of').css({ 'opacity' : 0.25 }); });
Combine JQuery and CSS3's opacity features to wire up an "OnHover" event to the images that changes the opacity of the said image.
http://www.css3.info/preview/opacity/
Unless you want to see through those images and show background pattern, there is no need to deal with opacity.
Even though you can prepare semitransparent version of image and change src attribute in onMouseOver event.
But you can achieve the same effect by simply putting a div with 1-pixel semitransparent background above selected image.
Using CSS opacity will cut off older browsers.
Hi You can easily do this by css, with somethings like this:
.img {opacity:0.4; /*some more css*/ } /* (opacity:) is now supported by all browsers */
.img:hover {opacity:0.98; /* Some more css be creative... */ }
That's all!
Here's some html, css, jquery that shows how to do it:
<div></div><a>Hover On Me</a>
div{
width:300px;
height:300px;
display:block;
background:red;
opacity: 0.6
}
a{
display:block;
margin-top:20px;
width:100px;
padding:5px;
height:20px; border-radius:5px;
background:yellow;
}
$("a").hover(function(){
$("div").animate({opacity:1},300);
}).mouseout(function(){
$("div").animate({opacity:0.6},300);
});
http://jsfiddle.net/Rd5Yy/2/
It looks like in the specific example you cite, they've used CSS3 transitions. See here for a tutorial: http://www.w3schools.com/css3/css3_transitions.asp
In a nutshell using these you can do all kind of funky effects without any javascript. CSS3 is supported by modern browsers (but is pretty cutting edge as web technologies go) and isn't yet a W3C standard.
This code should do what you wanted to do (I tested it against your HTML):
$(document).ready(function() {
$("#button").hover(function(){
$("#image").animate({opacity:0.6},300);
}).mouseout(function(){
$("#image").animate({opacity:1},300);;
});
});
Okay, I just checked out your page. Firstly, it looks like jQuery is not working through the $ on your site, so you'll need to either troubleshoot that, or use it by jQuery instead. I pasted this code in on the JavaScript console on your site and it works:
jQuery("a#button, img").hover(function(){
jQuery("img.imgClass").animate({opacity:1},300);
}).mouseout(function(){
jQuery("img.imgClass").animate({opacity:.6},300);;
});
edit: Looks like you got it working as I was typing up this response
I've tried to center vertically and horizontally my image while using image map with ImageMapster, but it didn't work.
http://eternidad.home.pl/index_proba.html
I've added :
#mapster_wrap_0 img{margin: 0 auto; align: center; vertical-valign: middle;}
But still image is on the bottom.
I also need to make onMousveOver effect, definied in the imageMapster's script,but I simply don't know how to do it - I have 4 areas, so I need sth like this, but it doesn't work.
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var ImgAry= ['str_glowna5.png','str_glowna5pl.png','str_glowna5en.png','str_glowna5es.png','str_glowna5ru.png']
var MapAry=[];
for (var zxc0=0;zxc0<ImgAry.length;zxc0++){
MapAry[zxc0]=new Image();
MapAry[zxc0].src=ImgAry[zxc0];
}
function Swap(id,nu){
document.getElementById(id).src=MapAry[nu].src;
}
/*]]>*/
</script>
//
<AREA SHAPE="RECT" coords="24,509,85,566" HREF="opis_ru.htm" TITLE="Russian" onmouseover="Swap('img',4);" onmouseout="Swap('img',0);" >
Please, help
Generally speaking to use CSS on an image that is bound with imagemapster you should apply styles to a wrapper, and not the image itself e.g.
-- CSS
.mapster-wrapper {
style="margin: 0 auto; align: center; vertical-valign: middle;"
}
-- HTML
<div class="mapster-wrapper">
<img usemap="..." src="...">
<div>
ImageMapster has to tightly control the CSS on the image itself in order for its layered effects to work. Just apply all your styling to your own wrapper around of the image.
It's possible to add a custom class to the wrapper that imagemapster creates:
$('#my_img').mapster({
(...)
wrapClass: 'imageMapster_wrapper'
});
then you just do
.imageMapster_wrapper {
margin:0px auto;
}
in your CSS, as Jamie Treworgy already suggested.
I want to change submit button of Web Forms for Marketers module with image in Sitecore.
Thank in advance
You can change the button by updating contents of the following file:
\sitecore modules\Web\Web Forms for Marketers\Control\SitecoreSimpleFormAscx.ascx
Replace
<wfm:FormSubmit ID="submit" runat="server" Class="scfSubmitButtonBorder"/>
with you own custom control (which can contain Image / LinkButton / whatever)
It sounds like you are trying to change the submit button into an <input type="image" />. I have not found a way to do this with WFFM. You can style the submit button, or you can export the form to ASCX and make the change to an image yourself.
You can do quite a bit with CSS styling of <input type="submit" />.
http://www.456bereastreet.com/lab/styling-form-controls-revisited/submit-button/
You can change the button style in Default.css.
Use background-image to add the image.
Below example use an image as background for the Submit button in WFFM:
.scfSubmitButtonBorder
{
background-image: url(/images/bg_button.png);
padding-left: 5px;
float: right;
margin-bottom: 10px;
}
.scfSubmitButtonBorder input
{
border: none;
padding: 0 5px 0 0;
color: white;
font: 14px/14px FrutigerRoman, Arial !important;
width: 100px;
height: 30px;
background-image: url(/images/bg_button.png);
background-position: right -30px;
background-color: transparent;
cursor: pointer;
}
I suppose you're talking about Web Forms for Marketers module, aren't you? It is not clear from your initial question...
Anyway, in Form designer you can select the submit button and you'll its properties on the left side. Among various properties, the very first is the edit box called "Button Name" . Put the desired text for the Submit button there.
Here's how I did it.
First, create a custom control:
namespace Sitecore.Custom.Controls
{
public class ImageSubmitButton : Sitecore.Form.Web.UI.Controls.SubmitButton
{
public string ImageUrl { get; set; }
protected override void AddAttributesToRender(System.Web.UI.HtmlTextWriter writer)
{
if (string.IsNullOrEmpty(ImageUrl) == false)
{
writer.AddAttribute("type", "image");
writer.AddAttribute("src", ResolveUrl(ImageUrl));
}
// This won't overwrite our explicit type="image"
base.AddAttributesToRender(writer);
}
}
}
Export the form as ASCX in sitecore, use the Developer Center to create a new Sublayout and copy the exported ASCX code into this file. First, register a new prefix
<%# Register TagPrefix="ctrl" Namespace="Sitecore.Custom.Controls" Assembly="<AssemblyName>" %>
Finally, change
<cc0:submitbutton runat="server" onclientclick="$scw.webform.lastSubmit = this.id;" text="Submit" validationgroup="..." cssclass="..." id="..." onclick="OnClick" >
</cc0:submitbutton>
to
<ctrl:ImageSubmitButton ImageUrl="~/imgs/button.png" runat="server" OnClientClick="$scw.webform.lastSubmit = this.id;"
Text="Submit" validationgroup="..." cssclass="..." id="..."
OnClick="OnClick"></ctrl:ImageSubmitButton>
Finally, replace the form in your item with the sublayout.