When the cursor is on the 2nd span, the photo will change and when the cursor is moved, the old photo will come.
This will require a little bit of JavaScript, but it can be put in your HTML document. The span tag can have a hover event call the JavaScript to change the image. Here is a simple example.
<img id="sampleImg">
<span id="span1" onmouseover="document.getElementById('sampleImg').src = 'image1.gif'"> Span 1</span>
<span id="span2" onmouseover="document.getElementById('sampleImg').src = 'image2.gif'">Span 2</span>
The image source paths will need changed to fit your needs, but otherwise this should be able to be implemented into your code. The onmouseover event in the span tag contains the JavaScript to change the given image's source.
I hope this solved your issue!
Related
To make a span into a clickable link.
I have made a span that contains only a background image (as part of a Gilder/Levin image replacement technique) into a clickable link, and it seems to work fine -- but, so far, that is only on my own desktop computer, and on Chrome, Opera, and IE 11.
Is this viable?
<div id="logo">
<a href="[absolute url]">
<span></span>
</a>
<h1>page name</h1>
</div>
It works on my computer, with Chrome, IE11 and Opera. Will it work universally?
While it might look okay in most browsers, you're using the <a> element incorrectly, as what goes inside it should be a meaningful label. The proper thing to do would be to wrap the entire <h1> in the link, or to put the <a> within the <h1> (both are valid HTML5).
<a href="[absolute url]">
<span></span> <h1>page name</h1>
</a>
But judging from your comments, it's probably too early for you to start worrying about image replacement techniques an web semantics when you're still figuring the syntax out.
What's the point of image replacement techniques and why using an empty <a> tag is bad?
The Gilder/Levin image replacement technique involves adding non-semantic elements to a page (such as <span> elements) and using CSS to replace them with icons, so that these elements are ignored by screen readers. After all, an icon next to a menu button might make the button more visible for someone who can see, but the icon becomes redundant when you're blind and are using a screen reader which will read the text of the button out loud anyway. This also might make your website easier to parse by search engines.
However, in the original code, you didn't put any label on the link (actual text between the <a> and </a>), therefore making it especially confusing for screen readers and robots to know what this link is supposed to be. The entire title should be within the <a> element in this case, allowing the whole line to be clicked to follow the link. It's definitely not a good practice to use an empty <a> element, and the fact that there is a <span> within it changes nothing.
And since the idea of leaving an <a> element is semantically absurd, I haven't found any reliable place documenting the behavior of such an element across browsers.
wasn't pretty sure what you are asking for:: or trying to achieve.
3. wrap span in a href tag.
2. span onclick() function with javascript
1. span:hover with css.
<div id="logo">
<a href="[absolute url]">
<span>this span is now like link text.</span>
</a>
<h1>page name</h1>
</div>
<div id="logo">
<span onclick="myFunction()">this span is now like link text.</span>
<h1>page name</h1>
</div>
<style>
span:hover{color:red;}
span:active {color:green}
</style>
The css one isn't really click stuff.
Yes, it's a reliable way to put <span> or <img>(or any element you want to be a link) in a <a> tag.
click here for Definition and Usage
The tag defines a hyperlink, which is used to link from one page
to another.
The most important attribute of the element is the href attribute,
which indicates the link's destination.
I have made a button using which must include a picture and text. Here is an example of what I have at the moment
https://jsfiddle.net/9c9dnot9/
<button id="CLPButton" class="DeptButton">
<span>
<table style="width:120%">
<tr>
<th><img src="http://i.imgur.com/vjrbizL.png"></th>
<th>Clinical Lab <br> Platforms</th>
</tr>
</table>
</span>
</button>
The reason I have it set up as a table is to properly adjust the alignment and formatting of the image and text within the button.
I can wrap the image and the text in tags to href to the page I want to link to.... but then you have to click the picture or the text. I want the entire button to be clickable and redirect to the URL.
I have tried every tip and trick I could find on numerous forums but can't seem to get it to work. Things either outright fail or completely screw up the formatting.
The purpose of this is to have a series of buttons for a SharePoint site which link to certain corporate departments.
I am somewhat new at coding in general so the more explanation the better! Thank you
Buttons are not intended to be links. The purpose of a button is to interact with HTML forms (e.g. submitting form data).
If you want to have something that looks like a button and behaves like a link, then I would recommend creating a link and styling it with CSS to look like a button.
In your fiddle, you can actually just change your <button> markup to <a> and it should all work fine.
Updated Fiddle
You can wrap the entire button in an a tag and add the display: block property in order to set its height depending on its content. Then, instead of setting the width on the button, set it on the link and add width: 100% to the button instead, so your link won't take the full width of its container and your button will be more maintenable because you won't have to set the width of the link and the button if you decide to change !
Here is a working fiddle: https://jsfiddle.net/d5tcamok/2/
i have a tinymce editor instance and by default the tooltips are positioned to the south of the object (buttons menuitems etc)
i would like to position them to the right (or east)
i can see in the css for the tooltips that there appear to be classes that operate this behaviour, but i simply can not work out how to use them
default css snippet
.mce-tooltip-arrow{top:0;left:50%;margin-left:-5px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-nw .mce-tooltip-arrow{top:0;left:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-ne .mce-tooltip-arrow{top:0;right:10px;border-bottom-style:solid;border-top:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-s .mce-tooltip-arrow{bottom:0;left:50%;margin-left:-5px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-sw .mce-tooltip-arrow{bottom:0;left:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-se .mce-tooltip-arrow{bottom:0;right:10px;border-top-style:solid;border-bottom:none;border-left-color:transparent;border-right-color:transparent}.mce-tooltip-e
can you see things like .mce-tooltip-ne in there - i assume that controls placing the tooltip to the north east
but i literally cant even make it happen
please help
i couldnt work out how to call the styles with the compass bearings
so i just shifted the tooltip using a couple of styles in the default tooltip class
highlighted in bold below
.mce-tooltip{position:absolute;left:100px;padding:5px;opacity:.8;filter:alpha(opacity=80);zoom:1}
.mce-tooltip-inner{ position:relative;top:-10px; font-size:11px;background-color:#000;color:#fff; min-width:400;max-width:600px; padding:5px 8px 4px 8px;text-align:center;white-space:normal}
this is from /tinymce/skins/lightgray/skin.min.css
the additions to the code pushed the tooltip to the right enough for what needed
If you are referring to the tooltip shown in image above, that is simply a native browser tooltip displaying the title attribute of the anchor tag containing the icon.
Here's the HTML for that button:
<a title="Bold (Ctrl+B)"
onclick="return false;"
onmousedown="return false;"
class="mceButton mceButtonEnabled mce_bold"
href="javascript:;" id="story_content_bold">
<span class="mceIcon mce_bold"></span>
</a>
Based on the above, the short answer to your question is: no you cannot change the position of the browser's native tooltip.
However there may be ways to manipulate the way the tooltips are displayed, which will require you to make changes to tinyMCE source code.
One idea is to use another attribute to contain the title text. This way you can use CSS to style the tooltip based on the alternative attribute rather than having the native browser tooltip.
For example you can use data-alt attribute:
<a data-alt="Bold (Ctrl+B)" class="specialtooltip"></a>
Then use CSS to style it as tooltip:
a.specialtooltip[data-alt]:hover:after {
/* style to achieve tooltip effect */
}
Please refer to this fiddle for example: http://jsfiddle.net/va3jn2qy/1/
I am not a HTML/CSS expert but I am in charge of developing and maintaining a website for my employer.
I have set of link in the middle of my webpage that I want to have a specific CSS applied to without affecting any of the other links, and really the only change I want to make is to move the title popup to the right. Basically, the pointing hand hover mouse icon blocks the text in the title, so I want to move the popup to the right of the pointer, so that it can be read completely during a hover.
I've seen a few different ways to manipulate the title popup but they are either way too complex for what I need, way too simple in that they affect all <a> tags on the page, or do not explain how to do what I want which is just move the popup to the right a little bit.
You can manually style any element of the page by using 'inline styling' which will not effect any of the other elements on the page.
You do this in the HTML rather than the Style sheet, for example say your style sheet has:
.tinybutton {margin:0;padding;0:}
Which would use the element in HTML as:
<a class="tinybutton" href="#"> </a>
Now let's pretend you want to move the button slightly right without editing the CSS you then use the inline styling like so:
<a class="tinybutton" style="margin-left:10px" href="#"> </a>
So in other words just add style=" " with the styling options you require to the element that you want to edit without effecting the CSS.
Now that you have answered your own question, I know that the titles you are trying to move are tool-tips generated by the browser.
Not only can those not be moved, these tooltips are browser dependent and looks different on each browser. I have no idea which one you are using but it is not Chrome because we made sure that the tooltip does not overlap the mouse cursor.
The other possibility, like the jQuery plugin you mentioned, is to write Javascript that renders each title in its own invisible HTML element. Then it makes those tooltips appear on by adding an a :hover style or mouse-event-handler.
Having done further research on this, I found several questions in StackExchange that indicate that a title cannot be modified. So given this:
<a title='stuff here' href='#'>Click me!</a>
it is not possible to manipulate the "stuff here" section using jscript, css, etc. The only option is to use a jQuery plugin or something along those lines, and that has proven to be beyond my ability to troubleshoot.
For the time being, I simply added spaces to the front of the title to push the text out, like this:
<a title=' stuff here' href='#'>Click me!</a>
This question already has answers here:
Make a div into a link
(30 answers)
Closed 9 years ago.
How do I make an entire DIV a clickable hyperlink. Meaning, I essentially want to do:
<div class="myclass" href="example.com">
<div>...</div>
<table><tr>..</tr></table>
....
</div>
And whenever someone mouse hovers of the myclass DIV, I want the entire DIV it to be a clickable hyperlink.
You can add the onclick for JavaScript into the div.
<div onclick="location.href='newurl.html';"> </div>
EDIT: for new window
<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;"> </div>
You can put an <a> element inside the <div> and set it to display: block and height: 100%.
You just need to specify the cursor as a pointer, not a hand, as pointer is now the standard, so, here's the example page code:
<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>
and the example CSS:
#smallbox {
cursor: pointer;
}
So the div is now a clickable element using 'onclick' and you've faked the hand cursor with the CSS...job done, works for me!
This is a late answer, but this question appears highly on search results so it's worth answering properly.
Basically, you shouldn't be trying to make a div clickable, but rather make an anchor div-like by giving the <a> tag a display: block CSS attribute.
That way, your HTML remains semantically valid and you can inherit the typical browser behaviours for hyperlinks. It also works even if javascript is disabled / js resources don't load.
Add an onclick to your DIV tag.
http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/
Why don't you just do this
<div>...</div>
That should work fine and will prompt the "clickable item" cursor change, which the aforementioned solution will not do.
alternative would be javascript and forwarding via the onclick event
<div onclick="window.location.href='somewhere...';">...</div>