cursor:pointer and default not reflecting immediately - css

I have two banners (images) which keep switching every 4 seconds. One image is clickable and the other is not. Below is the code,
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" style="cursor: pointer;"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" style="cursor: default;"/>
</div>
I have specified style for 1st and 2nd image as pointer and default respectively.
When images switch, 1st image will appear as Pointer to user when he moves his cursor over the image. When a switch happens to 2nd image, and when user has not moved his cursor away from the image, 2nd image will also appear as Pointer instead of Default.
Only when User clicks on 2nd image, it will change as Default and then User will come to know that 2nd image is not clickable.
Same thing happens with 1st image. When User is in 2nd image and when a Switch happens from 2nd image to 1st image, Cursor will still be default instead as Pointer. So, User doesn't know that 1st image is clickable.

Instead of using inline style.,just create two simple classes for your cursor styles like as follows.
For CSS :
<style type="text/css">
.clickable {
cursor:pointer;
}
.not_clickable{
cursor:default;
}
</style>
For HTML :
<div class="contentdiv">
<h:commandLink action="#{mybean.firstImageClick}" id="firstBanner" style="text- decoration:none;">
<img src="imagePath" width="590" height="210" border="0" class="clickable"/>
</h:commandLink>
</div>
<div class="contentdiv">
<img src="imagePath" width="590" height="210" border="0" class="not_clickable"/>
</div>
After that you can easily switch over the classes as per your wish, while you triggering or clicking the image.

Try pointer-events:none; css property mention where ever you want.

Related

Is there a proper way to use a base64 data-URI image from a CSS style sheet?

I'm creating a table containing images and want to refer to the src of the image as a base64 data-URI from a style sheet. This style sheet would contain muliple images encoded. I could do this within the body of the page or in the head, but that makes the document difficult to edit. How should I be coding the image tag in the body and table to refer from the external CSS?
I've tried using the image as a base64 data-URI within the body.
<img alt="B" src="data:image/png;base64,iVBORw0KG..." align="bottom" border="0" height="186" width="120">
That works. Also within the head as a style.
I've looked around stackoverflow and other places and found similar code but not with a external CSS file.
<!-- within the page body -->
<td style="vertical-align: top; height: 186px; width: 120px;">
<div class="parent">
<div class="child"><img src="C" align="bottom" border="0" height="186" width="120"> </div>
</div>
</td>
Here is a JSfiddle
https://jsfiddle.net/mL5fkung/
As you can see in the 1st row the images are shown in the traditional way.
In the 2nd row I've use the base64 image code in the img code.
The 3rd row shows the desired code that isn't working.
Your solution will work, if you add the class C to each <img>:
<img src="" align="bottom" border="0" height="186" width="120" class="C" />
JSfiddle: https://jsfiddle.net/a40qnzuf/

How to use inline css styling (style="vertical-alignment:middle;") in html5 <img> or <iframe> tags

**Note all <> tags have been removed to allow code to display
**
i have been playing around with this for hours and am not really getting it to work without using a workaround at the design end of things (ie Corel draw)
*Before i go any further,
First, website URL is AdventistAviation.com.au
Second, can i just say...i know this can be done with style sheets...however, in this case...i am not doing it that way!!! (so please dont bother pestering me with that option unless there is absolutely no way the method below can work)
Third, a workaround to my problem below, is to create the image already centered in its own background (the same size as the logo next to it) then import it (this is a bad idea because if in the future someone changes the main header background to a different color other than white...its gonna look awful!)
First i add the image (this works no problem)
However because the Logo on the left in the avada theme is approx 250×250 square, Tagline text is no longer centered in the header (as you can imagine comparing above with logo below)
I am using the themeforest AVADA Theme. In theme options>Banner Code For Header #4…
I would like to add the following inline css styling in an iframe for example, to vertically centre the Tagline (ie bring it down level with the middle of the logo)
style="vertical-align: middle;"
<iframe src="http://image_URL.png" style=”vertical:align: middle;” width="200" height="200"></iframe>
This doesnt seem to do anything different to the method in 1.
<div style="vertical-align: middle;"><iframe src="http://image_URL.png" width="200" height="200"></iframe></div>
I was hoping that if i place the iframe inside a tag containing the styling i might achieve my goal...alas it still doesnt work.
I have got to the point where my head is so full of nonworking methods i cant progress further.
Can someone help with this one?
p.s i have tried to find some inline css styling tutorials (specifically about vertical alignment styling) for the tag in html 5 without any luck.
damn w3c for depreciating the html vertical alignment method in html5!
# adam:
A simple solution is to change this code:
<div id="header-banner">
<div style="vertical-align: middle;" height="170" width="500">
<img src="https://googledrive.com/host/...etc..." width="400" height="200">
</div>
</div>
To just this:
<div id="header-banner" style="margin-top: 70px;">
<img src="https://googledrive.com/host/...." width="400" height="200">
</div>
There's no good reason to use inline styles for this, but anyhow, I've edited a chunk of your HTML with inline styles that will get what I think you want:
<div class="avada-row" style="margin-top:0px;margin-bottom:0px; display: table; width: 100%">
<div class="logo" style="display: table-cell;margin-right:0px;margin-top:0px;margin-left:0px;margin-bottom:0px; vertical-align: middle;">
<a href="http://adventistaviation.com.au">
<img src="http://adventistaviation.com.au/wp-content/uploads/2014/02/AAA-QLD-LogoType5_outlinedSQC1-e1398740621697.jpg" alt="Adventist Aviation Association" class="normal_logo">
</a>
</div>
<div id="header-banner" style="display: table-cell; vertical-align: middle; float: none; text-align: right;">
<div style="/* vertical-align: middle; */" height="170" width="500">
<img src="https://googledrive.com/host/0B7IkcUtUKfX8SkpLS1NuTlR4cDA/AAA_Tagline.png" width="400" height="200">
</div>
</div>
</div>

Styling image along with caption, if it exists, in Wordpress

This is Wordpress-related question, but since desired solution is purely CSS-related, I posted it in here, not at wordpress.stackexchange.com.
In my current style, if image has no following caption, it is placed using HTML code like that:
<p>
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="aligncenter size-medium wp-image-55">
</a>
</p>
In my current style, it is styled like that:
img {
display: block;
padding: 5px;
background-color: #eee;
border: 1px solid #ddd;
}
Which draws simple border around it.
If there is a caption following image, entire HTML in this part is a little bit more complex:
<div id="attachment_55" class="wp-caption aligncenter" style="width: 310px">
<a href="http://cnn.com/file.jpg">
<img src="http://cnn.com/file-300x225.jpg" alt="" width="300" height="225" class="size-medium wp-image-55">
</a>
<p class="wp-caption-text">Caption</p>
</div>
Currently caption is not styled at all (as per my currently selected theme).
What I would like to achieve is to have entire div styled (image and caption), if there is any caption. If I'm not mistaken, that would require to style img (as currently) only, if it is not followed by <p class="wp-caption-text">. If it is, then img should not be styled at all and it second-in-row parent (<div class="wp-caption">) should be styled instead.
That's all for the algorithm. But how to code this in CSS (and whether it is possible at all) -- I don't know.
The simpliest solution would be to never style img and always style <div class="wp-caption"> instead, no matter if there is caption following image or not. But the problem is, that Wordpress is adding that div only, if there is a caption. So styling only it, would result in no border at all, if there is only image.
if you can use Jquery.
you can manipulate the markup then. if the pattern of your img and img with caption is going to be like that, you can do this.
$('img').each(function(){
if($(this).parent().parent().hasClass("wp-caption")){
$(this).parent().parent().addClass('img');
}
});
am sure this code can be optimized even better, but it should give you an idea.
see this fiddle

Adding a div inside of an ActionLink

I have a tile that displays information but also needs to be a link. If the user clicks anywhere on the tile it needs to take them to the appropriate action.
Below is an image of what I have created.
The HTML
<div class="tile">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Now if I create an ActionLink, it will create the blue tile, but I am unsure of how to get the three child divs inside of the ActionLink.
I have tried the following ActionLink:
#Html.ActionLink("Runs", "Index", "Run", null, new { #class = "tile-text" })
This creates the following image:
So basically, how do I get the tile to link to the Action and still have all of the three child divs inside of it?
You could add a onclick="window.location.href='link'" attribute on the tile <div>, and style it with cursor: pointer to make it look like a link, if needed.
Example:
<div class="tile" onclick="window.location.href='link'">
<div class="tile-text">Runs</div>
<div class="tile-text details">Manage runs, routes, races, and goals</div>
<div id="runs" class="tile-text live">You have a four mile run today</div>
</div>
Or you could make the tile <div> be an <a> element and style it to be display: block and to include the appropriate width and height, then make all its children <span>s with display: block.
Example:
<style type="text/css">
.tile, .tile-text { display: block; }
// You could add width and height to .tile if needed.
// Also, if you want to put tiles next to each other, inline-block for .tile
// would be more appropriate.
</style>
<a class="tile" href="link">
<span class="tile-text">Runs</span>
<span class="tile-text details">Manage runs, routes, races, and goals</span>
<span id="runs" class="tile-text live">You have a four mile run today</span>
</a>
You need to have the blue tile as an actual image. This clickable image should be placed in a div.
With CSS you can then put the image behind the text content using z-index / absolute positioning.
This is a quick implementation of Radu's option 2.
All you need to do now is tidy it up and move the inline css into the css for your a class called title.
<body>
<a class="tile" href="#" style="width: 200px; height: 300px; background-color: lightblue; display: block;">
<h3 class="tile-text">Runs</h3>
<p class="tile-text-details">Manage runs, routes, races, and goals</p>
<p class="runs" class="tile-text-live">You have a four mile run today</p>
</a>
</body>

Need CSS effect when hovering over an image, to get another image and/or text to display above it

I have 10 country flags on my company's website (VS 2010/vb/asp.net4.0). Clicking a flag will display the website in that country's language for their entire session.
I would like to, when the client hovers over the flag, have a mini-picture of that country hover above and to the right of the flag. So when they click on the German flag, a mini-map of Germany appears to the upper right -- and I'll z-index it so it goes above the table row above it -- and in addition to the image, it'll say something like, "Deutch" or "View this website in German" (in German, of course).
**Images of countries here when hovering**
Flag1 Flag2 Flag3 Flag4 Flag5 Flag6 Flag7 Flag8
For someone like me who's not great at CSS, is this possible, and if so, how would I go about doing it? Any guidance would be greatly appreciated!
suppose you are using a list
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
<a class="flagbutton">
<img src="/flag1"/>
<img class="map" src="/flag1map"/>
</a>
.map{
display:none;
}
a.flagbutton:hover .map{
display:block;
}
you can add extra css to do the positioning in the .map bit!
This is pretty simple to do with just CSS, Javascript isn't required at all. There are lots of details, but the basic pattern is to put your images inside the same element as the flag. Let's call it .flag. Set the country images to display:none;. Then, set the .flag:hover img to display:block;. That will make the image appear only when hovering on the flag.
You'll have to set the position of the flag element to relative, and the position of the country image to absolute. That will allow you to set the top and right positions of the image to where you want.
I would recommend using jquery as that will allow you to get the display of the image/text when you hover. CSS will be used to position and format image or text.
Here is a good reference to start with.
http://api.jquery.com/mouseover/
You can do it in CSS but if you need animations you need JS. Here is the code for the one without the anims.
HTML
</ul>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
<li class="item">
<img src="flag.jpg" />
<img src="pic.jpg" class="pic" />
</li>
.
.
.
</ul>
CSS
.item {
position:relative; /*Needed for pos:absolute below*/
}
.pic {
display:none;
}
.item:hover pic {
display:block;
position:absolute;
top:-20px;
}
I've created a fiddle for you - http://jsfiddle.net/UHZzJ/
You can substitute the list with <div>'s as well or as your structure requries. The line which says 'View this website in German' needs to be in a sub-div adjacent to the link and be absolutely positioned to the parent <div>.
Forgot to add, a li:hover will not work in IE6. Only a:hover is allowed for. In that case you'll have to put the div within the <a> (setting the display:block). If you're open to JQuery, there are more elegant solutions - http://flowplayer.org/tools/tooltip/index.html, http://craigsworks.com/projects/qtip/

Resources