So, I have an image and when hovered on it, some text appears. What I want to do is to add a hyperlink in that text.
For example: Text says "hello my name is" then i want to include "click to find out" as a hyperlink linking to another page in my web application.
I have already tried the below:
<span>hello my name is <a href:"abc.php">click to find out</a></span>
The above is replacing the entire <span>by just showing "click to find out" as a hyperlink.
Any suggestions please ??
code tried:
<span class="text-img">
Diversity index is measured on a scale of 0 to 100.
Higher number indicates a greater degree of relative diversity.<a target="_blank" href="PanelHow.php">test</a>
</span>
Since you have not shared the actual code, it is difficult to find out the exact problem. So i have developed the small example for you. Check the below code and it is working fine.
.test {
display:none;
}
.maindiv {
display:inline-block;
}
.maindiv:hover .test {
display:block;
}
<div class="maindiv">
<img src="http://miumosa.com/assets/products/sample-_20170209104115.png" width="100" />
<span class="test">hello my name is click to find out</span>
</div>
Related
The second image shows the icon when the page is loaded but when I fires a function that changes the text on the left the icon looks like in the first image, with that little underscore. I have absolutely no idea why. The 'a' tag changes from 60 x 29 to 60.28 x 29 when the text on the left changes, the icon stays 60x60. Any help appreciated.
<div class="title" id='title'>This text changes on click and it works fine
<a href="https://icon.com" target=_blank>
<img src="icon.svg" id='icon'>
</a>
</div>
#icon {
fill: $mainColor;
height: 2.5em;
overflow: visible;
}
function changeText(text) {
document.getElementById('title').firstChild.data = text
/*this is all my JS code, functio fires on button click*/
Changing the first child node’s data somehow makes the browser include the space that was before the link, inside the link now.
If you log the innerHTML to console, you see something like the following:
Before:
This text changes on click and it works fine
<a href="#" target="_blank">
<img src="https://via.placeholder.com/50" id="icon">
</a>
After changing the text:
lorem ipsum<a href="#" target="_blank">
<img src="https://via.placeholder.com/50" id="icon">
</a>
(Example output from Chrome.)
So the space is inside the link now, and gets text-decoration: underline applied - that is the little line you see on the left of the image.
Funny enough, the effect seems to disappear, if you include a trailing space at the end of the text:
document.getElementById('title').firstChild.data = text + " ";
I can’t give you a full, proper explanation right now of why this happens in the first place - HTML has some rather complex rules how whitespace is treated in DOM creation, specifically at the start or end of an element’s content. Depending on the situation, sometimes such leading or trailing whitespace gets “moved” out of an element, and inserted outside of it, or vice versa.
I am working on a glossary and have made a bulky file with terms in columns behind which are hidden texts (with display:none), in plain css/html.
Each entry looks like this in code: <div class=w tabindex=0>Achidrupa<div class=tt>Here follows hidden explanation.</div></div>
Instead of :hover I use :focus so the explanation is kept opened up in a sort of popup window, without use of Java or JS.
As there are entries with slightly different spelling I like to refer to the main entry, but not with the rather clumsy ‘‘See entry blah blah blah’’.
So, I like to make internal links, as we are used to with # and name or id in the linked-to element. But whatever I try, I cannot get another entry opened from the opened window with the link. Can I get some help with that? Very grateful for any solution.
I believe I did not make this issue clear enough from the start. I have the following code, including tabindex=0 and with .w:focus .tt{display: inline-block ; cursor:pointer; } in css.
<div class=w tabindex=0 name="alpha">1ste Entry Alpha <div class=tt>
Follows text as explanation on alpha which becomes visible after a click on Entry Alpha, otherwise it stays hidden with css display:none. [Probably about or 100 words here.]</div></div>
<div class=w tabindex=0 name="beta"> 2nd Entry on beta <div class=tt>
Follows text as explanation on beta which <a href=#alpha>link to entry alpha </a> after a click. [Probably about or 100 words here.]</div></div>
What I need is the possibility to open window 1st Entry Alpha when I click in opened window Entry on beta and click on ‘link to entry alpha’.
I am sorry but the delivered javascript code and snippet didn’t work. It would not open any focused element. By the way, the glossary works great in this way, except for the internal linking.
Here is a solution using javascript: get the hash, find element with corresponding name and focus it. The whole thing is wrapped in onload otherwise the browser wont focus the element.
window.onload = function () {
var hash = window.location.hash.substr(1);
if (hash) {
var target = document.getElementsByName(hash)[0].focus()
}
}
.w {
display: block;
color: black;
text-decoration: none;
}
.w > div {
display: none;
}
.w:focus {
outline: none;
}
.w:focus > div {
display: block;
}
<a name="q1" href="#q1" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q2" href="#q2" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
<a name="q3" href="#q3" class="w">
Question ?
<div>mopm adsma pomfdsapoi mfadsp fasdm pasofdm pasdofi mdfs apfd smapfdso amfp ad</div>
</div>
First allow me preface, I know very little about html, CSS, etc. Most of what I can do is by following other examples. I am doing a header menu, and each link is an anchor within the page. (the div are hidden until clicked) However I became stuck on this problem. I have link within page as follows:
<div class="header">
Block 1
Block 2
</div>
This will give me url "localhost/test1.html#B1". However, one of the div blocks contains this:
<div id="B1">
<a href="#slide-one">
<a href="#slide-two">
</div>
So I already figured out I can't do "localhost/test1.html#B1#slide-one".
I don't know if its possible to even do this anchor link to page that is already opened as anchor. No option to use any jquery, flash, java, etc. I can only use HTML/CSS. I am going to assume this is not possible, but I thought one last attempt to try this and ask here.
EDIT:
Updated sample code provide better explanation:
<style type="text/css">
div#Menu {
height:90px;
left:0;
position:fixed;
top:-5px;
width:100%;
text-align:center;
}
div#B1 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B1:target {
top:100px;
left:375px;
}
div#B2 {
position:absolute;
left:-1000px;
margin-top:0;
}
div#B2:target {
top:100px;
left:375px;
}
</style>
</head>
<body>
<!--Header Menu-->
<div id="Menu" class="header">
Block 1
Block 2
</div>
<div id="B1" class="blocks">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-one"><img src="slide-one.png"/></li>
<li id="slide-two"><img src="slide-two.png"/></li>
</ul>
Slide 1
Slide 2
</div>
</div>
<div id="B2">
<div id="Slider1" class="Slide">
<ul>
<li id="slide-three"><img src="slide-three.png"/></li>
<li id="slide-four"><img src="slide-four.png"/></li>
</ul>
Slide 3
Slide 4
</div>
</div>
What I have are CSS image sliders with thumbnail navigation that are anchors within each section. On the menu I go to block #1 which opens which contains one image slider gallery. My page url changes to "test1.html#B1" The image slider has anchor for each image.
On a separate normal page the slider alone would give page url for each image something like "test1.html#slide-one".
But this is nested, and the image slider is child to "B1" block. I need to have the block #B1 opened, and AFTER that has opened on page I have the image slider gallery. That has its own anchors for each image, but I need "B1" to remain.
From how your question is expressed we can think of two different needs:
Since you said you're wanting to do localhost/test1.html#B1#slide-one it could mean that you consider #slide-one exists not only in the "context" of #B1 but also elsewhere (say in #B2 for instance): but if this happens it means that #B1 and #B2 are not in the same HTML page! So it cannot be what you're wanting.
At the opposite, the whole rest of your text indicates that all the parts you want to reach are in the same page. So it's the case I'will explain below.
When in the same HTML page, it can't be several ids with the same value: an id is unique, by design.
The consequence is: to target a given id you have no need of several intermediate points, even if the user really used these intermediate points like in your example.
In summary, the code you showed in your question is perfectly enough!
Last point: if an id is always unique, at the opposite you can have an unlimited number of occurrences where you target it. In other words, the same (unique) destination can be pointed to from several <a>.
I have a page which is not formatting properly, or at least not formatting as I expect it to.
Below is a simplified version of the code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
links within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more links
within the text.</span>
And more text.
</pre>
</div>
</div>
Only the font color is changed by the <span class="blue">.
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between the </a> and the </span> is black (instead of blue).
Any idea as to why, after the </a> tag, the text color does not return to blue?
Thanks!
John
* UPDATE *
First, thanks to all who created examples to test the premise that the color SHOULD be blue after the </a> tag! You proved I'm not crazy! (or not completely crazy).
I made a copy of the example at JS Bin and on the copy page pasted in a major section of the page with the text color problem. To my amazement, the text after the </a> tag is blue, as it should be.
Next I looked through the CSS to find any style elements that might affect the div, span, a, or pre tags, and put them in the CSS section on JS Bin. The resulting formatting still looks correct, with the text after the </a> tag still blue.
So then I copied the entire CSS file and pasted it into the CSS section on JS Bin. That broke it. The text after the </a> tag changed to black, which was the problem I've been having with the page.
So, somewhere in this massive CSS file there is something which is affecting how this page renders. Why, I don't know. I've always been under the impression that after an in-line closing tag the formatting should return to that in effect before the opening tag, but somehow something is changing that behavior.
It is now about 2:15 AM here, so I'm going to call it a day, get some sleep, and take a fresh look at it after some rest.
John
* UPDATE *
I've gone through the entire page making sure that all tags are matched, the nesting correct (no DIV elements inside a SPAN, etc.), and it still does not format properly.
I can't spend any more time on it, so I've come up with a kludge - close the span immediately before the <a href...> and open a new <span class="blue"> immediately after the </a>, as shown below. I know it shouldn't be necessary, but if that is what it takes to make it work, so be it. So, here is the revised simplified code.
<div ...>
<div class="db_notes">
<pre>
Some Text.
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more
</span>links<span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted
and comes from a database and often contains one or more
</span>links<span class="blue">
within the text.</span>
And more text.
</pre>
</div>
</div>
I still would like to know why the browsers are behaving in this manner. If anyone has any thoughts as to what is happening to cause the formatting to break down after the </a> tag, I'd love to hear them.
Thanks,
John
I couldn't get into a source code file for another project (locked for editing), so while waiting I took another look at the problem page.
In looking through the page in Firebug I noticed that while the page source has exactly one <a name="top"> tag, the Firebug display shows multiple instances of that tag. Strange.
Then I looked closer and noticed that there was no </a> tag matching the <a name="top"> tag.
After replacing:
<a name="top">
with:
<a name="top"></a>
The page works correctly!!!
At some point the web site needs to be updated to replace the:
<a name="top"></a>
...and other "a name=" tags with:
<a id="top"></a>
...tags to comply with HTML 5, but with over 2,300 dynamic pages, most with from one to thirty <a name="text"> tags, it will be a long time before there will be funding for such an effort. Another reason why some tags and options need to be supported for backward compatibility.
Thanks again to all who have contributed assistance in any form!
Best wishes,
John
The color of the text between the <span class="blue"> and the <a href...> is blue (as desired), but the color of the text between them </a> and the </span> is black (instead of blue).
If I assume you are using .blue {color: blue;} this property for span then it will change the text color blue for text which is inside the span tag. The text out of <span> will be black.
Have a look at this DEMO.
in this case, I've changed the <span> color from blue to red and you see <a> tag text is still blue which is by default.
Note: only the text inside span will be in blue color that not include the text inside the<a> tag. by default giving a link to <a> tag its change to blue color.
I am new to web building. Currently following a tutorial for making an image gallery.
http://www.webreference.com/programming/css_gallery/index.html
It all works okish (enough for me to fix things to my liking) apart from the thumbnail section. Below is a snippet of the html and css for the thumbnails which I think is relevant to the help I seek. Basically, when you hover over the thumbnail, the main image will appear in a free space in the page above. That kind of works (image doesnt appear in the right place, but I can fix that no probs) but the thumbnails are not displaying my images.
I changed the container div to "gallery" as I already have a container in my html, and dont want it to be affected by the new css following the tutorial...
html:
<li>
<a class="gallery slidea" href="#nogo">
<span>
<img src="images/Picture 014.jpg" alt="Wedding" title="Wedding" />
<br />
Wedding
<br />
Outside area wedding
</span>
</a>
</li>
CSS:
#gallery a.slidea {
background:url(images/Picture 014 thumb.jpg);
height:38px;
width:50px;
}
Also for my CSS, the W3C validator says " #gallery a.slidea " Value Error : background Parse Error thumb.jpg) which I dont understand.
Would love some help :D
Cheers
P.S I'm looking at putting this website onto wordpress (thats a tutorial I'll follow later on with more success I hope)
Your error is here:
background:url(images/Picture 014 thumb.jpg);
That space is throwing it off. Put the url in quotes:
background:url('images/Picture 014 thumb.jpg');
The other problem is in your HTML.
Your CSS says #gallery a.slidea
This would point at all links with the class 'slidea' that are in an element with the id of 'gallery'. Your HTML indicates that the link is of class 'gallery' and 'slidea'. The right way to do it would depend on your goals.
The call to the class doesnt match the name of the class
<a class="gallery slidea" href="#nogo">
is calling
#gallery a.slidea {
Try making them the same name, e.g.
<a class="gallery_slide" href="#nogo">
#gallery_slide a {