Printable View
I would like to know how to return to online for a span. Here is my part of the code:
I doubt with with my span tag, I mean shouldn't I need to close the tag <span title .. > <br> ...HTML Code:$ mp3 = '<span title = "'$. filesize_mp3.'<br> RS "> <a href="#"> <img src="mp3.gif" align="absmiddle" class="Img01" /> </ a> </ span>';
Is there anyone who can help me or explain me about the same?
The <span> is unnecessary. If you just want to put a title attribute, you can do on any item here on <a>.
We can not put in an attribute tag, title or another. We can not save for end of line in a bubble title. If you really want, you'll have to go DIY and make JavaScript for bubbles whose content is in HTML.
I tried like that, but without result:
HTML Code:$ mp3 = '<script language="JavaScript"> document.write ( "span title ="'$. filesize_mp3.'\ nLine2 ">)</ script> ';
$ mp3 .= <a href="#"> <img src = " '$. path2icons.'mp3_yes.gif "align =" absmiddle "class =" img01 "/> </ a> </ span>';
When I talked about tinkering in JavaScript, I meant "we can not do that with normal tooltip with title, so instead we'll schedule tooltips that accept html, JavaScript. I know it is, but I can not give you a starting point. Basically you have no need of this new line.
It would be nice to have a bit more html code. I'll assume the following:
at the CSS, we'll put the info bubble just below the image, and hide it.HTML Code:<div class ="file">
<img id ="logo" src ="logoFile.jpg" alt ="">
<span id ="bubble">
size: 2MB <br />
Duration: 02:05<br />
etc: info
</ span>
</ div>
with javascript you will see on the screen the info bubble when it passes over the imageHTML Code:.file {
position: relative;
}
.file span {
position: absolute;
display: none;
/** has to change depending on how you want **/
width: 200px;
top: 80px;
left: 40px;
padding: 5px;
background: #eeffce;
/*****/
}
HTML Code:var img = window.document.getElementById('logo');
var span = window.document.getElementById('bubble');
img.onmouseover = function(){
span.style.display = "block";
}
img.onmouseout = function(){
span.style.display = "none";
}
I used like that, but it not even displays the tooltip
HTML Code:<head>
<style>
.file {
position: relative;
}
.file span {
position: absolute;
display: none;
/** has to change depending on how you want **/
width: 200px;
top: 80px;
left: 40px;
padding: 5px;
background: #eeffce;
/*****/
}
</style>
<script language="JavaScript">
var img = window.document.getElementById('logo');
var span = window.document.getElementById('bubble');
img.onmouseover = function(){
span.style.display = "block";
}
img.onmouseout = function(){
span.style.display = "none";
}
</script>
</head>
<body>
<div class="file">
<img id="logo" src="1.png" alt="">
<span id="bubble">
size : 2MB<br />
duration : 02:05<br />
etc : info
</span>
</div>