I want to add a custom cursor to my html picture gallery, where there I get a 'previous' or 'next' custom cursor over the left or right sides of the images.
I have tried adding a custom cursor through html and css (also tried built in cursors).
I had code that worked for this, but lost it in a hard drive crash. I think the previous effort was in css.
I've spent ~8hrs research trying to rebuild this, now resorting to trial & error & error & ...
img.pad {
float: right;
padding: 2px;
}
.lmap {
cursor: cell, url(larrow.png)
}
.rmap {
cursor: progress, url(rarrow.png), auto
}
<img usemap="#imap" class="pad" src="img_0001.jpg" width="850" height="638" title="img_0001.jpg">
<p>
<map name="imap"><area shape="rect" class="lmap" coords="0,0,340,637" cursor= copy href="P001.html" >
<area shape="rect" class="rmap" coords="510,0,849,637" href="P003.html"></map>
I get no err msg & nothing beyond the (default) finger when hovering over the linked portions of the image.
The linkage works (even with bad cursor code), but I would like to get the cursor part running again.
I know the code is butchered, but I have tried many versions, arrgh! I really want the png images, per the css section.
Try:
.lmap {
cursor: url(larrow.png), cell;
}
.rmap {
cursor: url(rarrow.png), progress;
}
The url declaration should be first, while the other values are used as a fallback in case the url doesn't work. It doesn't make any sense to have the url as a fallback to a native value, as a browser will never choose to fallback to url value.
More info on cursor CSS here.
Related
Here's a link if this would help:
lovesongforever.com/nancytributes
Trying to add a custom css cursor. If I try to use a standard cursor for
testing purposes, e.g., "wait", cursor change happens properly ... but NOT
for custom css cursor via url(...)
Couldn't get the css cursor spec to work without ", help"
.surpriseCursor {
cursor: url(clapping_hands.gif), help; /* max size = 32 X 32 pixels */
}
<a name="surprise"> </a>
<a href="#surprise" onclick="PlaySound('applause', 'applause.mp3'); return false">
<img class="surpriseCursor" src="Broken_Heart.gif"><p>
</a>
You need to specify a default cursor in case your custom one doesn't load, without it you don't have a correct CSS property. As per W3C:
A comma separated list of URLs to custom cursors. Note: Always specify
a generic cursor at the end of the list, in case none of the
URL-defined cursors can be used
This should be set in most cases (definitely yours) to auto.
The correct code:
.surpriseCursor {
cursor: url(clapping_hands.gif), auto;
}
See link: https://www.w3schools.com/cssref/pr_class_cursor.asp
I would like to move the href assignment to CSS.
Something like <a style="href: url('Home.htm');">Home</a> instead of Home.
Is it possible to do this in CSS?
I have a button at several places in my site whose corresponding URL value, might change in the future. I want to change the target address only in one place, i.e. my CSS file, instead of having to manually change them for every instance of that button.
This behaviour isn't really supported, as explained in other answers. But if you really need this on a page, it's possible to add it using some JavaScript. Used-defined custom variables/properties in CSS need to start with --, and I'll use the name --href-override.
We'll listen for all mousedown and touchstart events on links in the document. These events are useful because they'll always occur before the click is registered. Each time we handle one of these events, we check if the associated link has a --href-override property/variable defined in CSS. If so, we replace the HTML href with the CSS --href-override value, and the browser will automatically use that new value when handling the click event.
function overrideEventTargetHref(event) {
// if it's the beginning of a click on a link...
if (event.target.tagName === 'A') {
var link = event.target;
var override = getComputedStyle(link).getPropertyValue('--href-override').trim();
// if the link has an CSS href-override and it's different than the HTML href...
if (override && override != link.href) {
// replace the HTML href with the CSS href-override
link.href = override;
}
}
}
window.addEventListener('mousedown', overrideEventTargetHref, false);
window.addEventListener('touchstart', overrideEventTargetHref, false);
.override {
--href-override: https://stacksnippets.net/;
}
actually example.com
secretly stacksnippets.net
This also work properly for things like middle-clicking to open in a new tab.
This is quite a hack and you usually wouldn't want to do it. But if your situation requires it, you can.
CSS is a styling sheet, so the short answer is no. Also not entirely sure as to what your reason for wanting to is, but if it's due to changing data, use JavaScript or PHP to do this instead. Much easier, logical, and possible.
The href property stands for hypertext reference. It is not an entity that lends itself to styling; see this resource. If you wish to style how that location's text value appears on a page, you could write code that styles the a tag and if you want to get fancier you could add on a pair of span tags, as follows:
CSS:
a {
font: 14px Arial,Helvetica;
color: #00c;
text-decoration:none;
border: 4px dotted #009;
}
a:hover {
border: 3px solid #009;
}
span {
color: #f0f;
}
<span>Home</span>
As for changing the values of the buttons, if you run Linux, it provides various helpful utilities, such grep; see this discussion. Also, see this article.
I am Building a Javascript app
Now I want to have a image button that I have given already now I want to change the image to another image on clicking current image.
When i click again I want to get back the old image please any one help me by giving a coding example pls..
Try this:
function diffImage(img)
{
if(img.src.match(/blank/)) img.src = "black.jpg";
else img.src = "blank.jpg";
}
HTML
<img src="black.jpg" id="image1" onclick=diffImage(this) />
Just try to change image path as per your requirements or you can add multiple images.
DEMO.
Hope this work.
You could also do it with only using CSS if you wanted to.
Just make a checkbox so you can click it without having to trigger an event and put the image in there and then have a different image for when it has been clicked.
<input type="checkbox"/>
And your CSS:
input[type="checkbox"] {
content: url(image url here);
}
input[type="checkbox"]:checked {
content: url(different image here);
}
I don't remember where I learned this trick, but it's worked for me in the past.
I have two classic HTML pages (just HTML and CSS) and links between them.
When I click on these links, the screen flickers (it quickly goes white between transitions).
I tried to place this in the head - without result:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.0)" />
I can usually open other sites without the flickering.
Browser is Firefox 16.0.1.
Just change your body background to:
body {
background: url("Images/sky01.jpg") repeat scroll 0 0 #121210;
font-family: Verdana,Geneva,sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
background color will prevent white flickering while loading the background image.
That meta are for IE only, they don't work in FF.
You can't rely prevent flickering in plain HTML. The best solution I found is to replace every link with a JavaScript call where you download the page with AJAX and then you replace the document itself with the new content. Page refresh will be really fast and you won't see any blank screen while downloading.
Basic function may be something like this:
function followLink(pageUrl)
{
jQuery.ajax({
url: pageUrl,
type: "GET",
dataType: 'html',
success: function(response){
document.getElementsByTagName('html')[0].innerHTML = response
}
});
}
Then you have to replace you links from:
Link
With:
Link
More details about this: replace entire HTML document]1: how to replace the content of an HTML document using jQuery and its implications (not always so obvious).
Improvements
With this solution you force your users to use JavaScript, in case it's not enable they won't be able to click links. For this reason I would provide a fallback. First do not change <a> but decorate them with (for example) a CSS class like async-load. Now on the onload of the page replace all hrefs with their javascript: counterpart, something like this:
jQuery().ready(function() {
jQuery("a.asynch-load").each(function() {
this.href = "javascript:followLink(\"" + this.href + "\")";
});
});
With this you can handle a loading animation too (how it's implemented depends on what yuo're using and your layout). Moreover in the same place you can provide fade in/out animations.
Finally do not forget that this technique can be used for fragments too (for example if you provide a shared navigation bar and a content sections replaced when user click on a link the the navigation bar (so you won't need to load everything again).
Try to embed pictures as it delays final page loading and therefore white transition time
echo '<img src="data:image/png;base64,';
echo base64_encode(file_get_contents($file));
echo '"/>';
I have this a and I don't know that I need to insert into the "onmouseover" so that the cursor will change to finger pointer like a regular link:
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover=""> A </a>
I read somewhere that I need to put:
onmouseover="cursor: hand (a pointing hand)"
But it's not working for me.
Plus I'm not sure if this is considered JavaScript, CSS, or just plain HTML.
<a class="menu_links" onclick="displayData(11,1,0,'A')" onmouseover="" style="cursor: pointer;"> A </a>
It's css.
Or in a style sheet:
a.menu_links { cursor: pointer; }
You can do this in CSS:
a.menu_links {
cursor: pointer;
}
This is actually the default behavior for links. You must have either somehow overridden it elsewhere in your CSS, or there's no href attribute in there (it's missing from your example).
I like using this one if I only have one link on the page:
onMouseOver="this.style.cursor='pointer'"
in css write
a.menu_links:hover{ cursor:pointer}
Here is something cool if you want to go the extra mile with this. in the url, you can use a link or save an image png and use the path. for example:
url('assets/imgs/theGoods.png');
below is the code:
.cursor{
cursor:url(http://www.icon100.com/up/3772/128/425-hand-pointer.png), auto;
}
So this will only work under the size 128 X 128, any bigger and the image wont load. But you can practically use any image you want! This would be consider pure css3, and some html. all you got to do in html is
<div class='cursor'></div>
and only in that div, that cursor will show. So I usually add it to the body tag.
I think the "best answer" above, albeit programmatically accurate, does not actually answer the question posed. the question asks how to change the pointer in the mouseover event. I see posts about how one may have an error somewhere is not answering the question. In the accepted answer, the mouseover event is blank (onmouseover="") and the style option, instead, is included. Baffling why this was done.
There may be nothing wrong with the inquirer's link. consider the following html:
<a id=test_link onclick="alert('kinda neat);">Click ME!</a>
When a user mouse's over this link, the pointer will not change to a hand...instead, the pointer will behave like it's hovering over normal text. One might not want this...and so, the mouse pointer needs to be told to change.
the answer being sought for is this (which was posted by another):
<a id=test_link onclick="alert('Nice!');"
onmouseover="this.style.cursor='pointer';">Click ME!</a>
However, this is ... a nightmare if you have lots of these, or use this kind of thing all over the place and decide to make some kind of a change or run into a bug. better to make a CSS class for it:
a.lendhand {
cursor: pointer;
}
then:
<a class=lendhand onclick="alert('hand is lent!');">Click ME!</a>
there are many other ways which would be, arguably, better than this method. DIVs, BUTTONs, IMGs, etc might prove more useful. I see no harm in using <a>...</a>, though.
jarett.
Add an href attribute to make it a valid link & return false; in the event handler to prevent it from causing a navigation;
A
(Or make displayData() return false and ..="return displayData(..)
Solution via pure CSS
as mentioned in answer marked as the best
is not suitable for this situation.
The example in this topic does not have normal static href attribute,
it is calling of JS only, so it will not do anything without JS.
So it is good to switch on pointer with JS only.
So, solution
onMouseOver="this.style.cursor='pointer'"
as mentioned above (but I can not comment there) is the best one in this case.
(But yes, generaly, for normal links not demanding JS, it is better to work with pure CSS without JS.)
<! –– add this code in your class called menu_links -->
<style>
.menu_links{
cursor: pointer;
}
</style>
In the above code [cursor:pointer] is used to access the hand like cursor that appears when you hover over a link.
And if you use [cursor: default] it will show the usual arrow cursor that appears.
To know more about cursors and their appearance click the below link:
https://www.w3schools.com/cssref/pr_class_cursor.asp
div{cursor: pointer; color:blue}
p{cursor: text; color:red;}
<div> im Pointer cursor </div>
<p> im Txst cursor </p>