Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Hiding URL title="text" on mouse over?

Sdashiki

Sdashiki

macrumors 68040
Original poster
Aug 11, 2005
3,529
11
Behind the lens
Ok, strange conundrum. I am using Lightbox to the point where Ive hidden alot of html within the "title" variable of the the <a> link tag.

So, whenever you hover over the image you would click to bring up a lightbox, you see the title text...which in my case happens to be a few hundred characters of html...and not, say, "Image of a Frog" as it would normally be.

How do I either hide or change what is displayed on mouseover? Java, css, html whatever, something simple though, would be nice.

I may have put myself into a corner by doing what ive done to the lightbox html, but it works otherwise just fine. ;)
 
Are you talking about the yellow box that pops up when you hover over the image? That's not from Lightbox. The best thing to do would be to remove all that HTML from the title tag, it's not valid to be there anyways if it's HTML.
 
I realize that, but without getting into hardcore lightbox coding, its the best way to make my popup work. Validity means nothing to me on this website.
 
Sdashiki said:
I realize that, but without getting into hardcore lightbox coding, its the best way to make my popup work. Validity means nothing to me on this website.
Click to expand...

Can you elaborate on what you're wanting, because it's a bit confusing? Some examples and maybe a link to the page would be beneficial.
 
<p><a href="../images/examples/spectra.jpg" rel="lightbox" title="

<p><b>Credit: <a href='http://www.flickr.com/###' >name</a><br />
<i>Spectra QPS</i></b></p>

<p><em><strong>Polaroid Spectra</strong></em></strong></p>
<p><strong><em>Tips & Tricks</em></strong></p>

">

<img src="../images/films/spectra.jpg" /><strong>Spectra / Image</strong></a></p>
Click to expand...

Is the code.

As you can see I have hidden alot of this html inside the title of this particular link. The rel="lightbox" makes it so when you click this link (an image as you can see by the end of the code) it pops up a "lightbox" window. Typically this only allowed you to put a caption using the title attribute. BUt I found you can "hide" html code inside the title tag and through CSS, format a nice popup window. Thats why there are so many odd tag combinations, classes wouldnt work.

Its a not a DIV popup by any means, and all the solutions I found were far to complex for my simple needs.

in any case, because the title attribute contains all the code above, when you hove over the image/link, the little yellow box in FF and IE show the title text...which is html gobbly gook.

Not a huge deal, but kinda distracting when IE6 makes the entire title show and its long.
 
I don't think there is any way to hide the content of the title tag for all browsers. The only way would be to leave it empty...

Even if you write a JS (and I can't think of any kind of script that would remove the content of the title tag without breaking your code), that would have to run after the page loaded. That would considerably slow down your page loading time.

Actually, the best way would probably have been to write a JS that write your lightbox code on the fly (within the title tag or not) when you click the href...

Something like: <a href="javascript:myLightboxScript(variable1, variable2, variable3);">Some Link</a>
 
That was one of many Lightbox clones I was looking at. But, like most, it was far too much for my needs.

I just want a popup with html in it. Thats it.

Seems like no one wrote something that simple, instead they give you everything.
 
Sdashiki said:
That was one of many Lightbox clones I was looking at. But, like most, it was far too much for my needs.

I just want a popup with html in it. Thats it.

Seems like no one wrote something that simple, instead they give you everything.
Click to expand...

Just because it provides more, doesn't mean you have to use it all. The setup is very similar to LightBox, so isn't going to be anymore time consuming and will leave you with a better result than trying to find a hack.
 
As a plan "B" using your original title with the HTML (if the tooltip approach fails for you), have you tried this simple approach to null the title?

HTML: 
<p><a onMouseOver="javascript: this.title='';" href="../images/examples/spectra.jpg" rel="lightbox" title="...your original HTML stuff...">test</a></p>

Tested, works. Add the OnMouseOver attribute and value to your anchor tag. Javascript rocks, eh? "this" represents the anchor tag as a node, allowing you access to the title attribute, set it to nothing or whatever you want. Note, the tooltip approach is a lot nicer looking anyway! I'd go that route even if you got this to work! :)
 
wztooltip saved the day.

wish it was a TINY bit more configurable (like a border around the title would be nice, instead it just uses a background color and covers the border)

But, after a bit or moving my horrible hack code, its all good now.

Very happy with it.

THANKS!

and thanks for the tip on hiding the title, that is useful on other pages.
 
SrWebDeveloper said:
As a plan "B" using your original title with the HTML (if the tooltip approach fails for you), have you tried this simple approach to null the title?

HTML: 
<p><a onMouseOver="javascript: this.title='';" href="../images/examples/spectra.jpg" rel="lightbox" title="...your original HTML stuff...">test</a></p>

Tested, works. Add the OnMouseOver attribute and value to your anchor tag. Javascript rocks, eh? "this" represents the anchor tag as a node, allowing you access to the title attribute, set it to nothing or whatever you want. Note, the tooltip approach is a lot nicer looking anyway! I'd go that route even if you got this to work! :)
Click to expand...

Just curious, by removing the text of the title onmouseover, would the text return onmouseout? I didn't try this out so wasn't sure off hand, but I think he was wanting to keep the contents of the title attribute preserved since it was being used as a caption. The JavaScript aspect of course could be updated to preserve that title content, but wasn't sure if your suggestion was completely removing the content or not.

Glad to hear the OP has a working solution.
 
@angelwatt:

If the title value had been lost then a copy of the attribute value would be needed by adjusting Lightbox code. The whole concept of using HTML in the title is just plain wrong anyway. So if it ended up that way, I feel it's a waste of time to re-code Lightbox to mirror the value, might as well use that time and energy and do the tooltip. That occured, and it's the best thing overall - not only does it look better, but no standards are broken. That's a winner for the OP.

The OP took my advice as intended, just a cool HTML trick for the future.

-jim
 
Im using the WZtooltips allover this new section of my website.

I just wish there was some sort of option to make it grey out the background like lightbox does.

Some of the "tooltips" are more like popup divs.
 
Help needed Sdashiki

Dear Sdashiki, I am facing the exact problem with lightbox and can't figure out what to do with the title on mouseover. My description of the title is in HTML and thus I don't want it to show in mouseover and only in the lightbox. What did you do to solve your problem. What did you change in the js file or HTML or CSS. I am really lost and need your help desperately.

Regards

Alk8611




Sdashiki said:
Ok, strange conundrum. I am using Lightbox to the point where Ive hidden alot of html within the "title" variable of the the <a> link tag.

So, whenever you hover over the image you would click to bring up a lightbox, you see the title text...which in my case happens to be a few hundred characters of html...and not, say, "Image of a Frog" as it would normally be.

How do I either hide or change what is displayed on mouseover? Java, css, html whatever, something simple though, would be nice.

I may have put myself into a corner by doing what ive done to the lightbox html, but it works otherwise just fine. ;)
Click to expand...
 
Alk8611 said:
Dear Sdashiki, I am facing the exact problem with lightbox and can't figure out what to do with the title on mouseover. My description of the title is in HTML and thus I don't want it to show in mouseover and only in the lightbox. What did you do to solve your problem. What did you change in the js file or HTML or CSS. I am really lost and need your help desperately.

Regards

Alk8611
Click to expand...

Wow, good luck getting him to check a three year old thread. :(
 
Dono if anyone is still struggling to find a solution to this, thought i might give it a try.

If what you want to do is hide the title attribute when you mouseover a tumbnail but still keep the title so it appears as a discription for the fullsize lightbox image then try this:

instead of using the title="description" in your link, try calling the title onclick.

example:

if you have
<a title="Discription" href="fullsizeimage.jpg"></a>

replace the title="Description" with onclick="javascript: this.title='Description' ;" onMouseOver="javascript: this.title=' ' ;"

so it will look something like this:

<a onclick="javascript: this.title='Description' ;" onMouseOver="javascript: this.title=' ' ;" href="fullsizeimage.jpg"></a>

this will call the title only when the link is clicked and not show the title when you hover over it again.

Hope this helps!
 
using description for title

To renier

I see this thread is kind of old, hope you are still checking it. I tried your solution and it worked as far as the code not showing up with a mouseover on the thumbnail, but my images are in a gallery and when I clicked the next arrow from the large image, when the next image loaded it didn't show the title/description at all. It only shows it if you click on the thumbnail.

I should mention I'm using the fancybox version of lightbox.
 
elhz said:
using description for title

To renier

I see this thread is kind of old, hope you are still checking it. I tried your solution and it worked as far as the code ...
Click to expand...

--
use only the onMouseOver="...." attr

this will solve your problem!

Greetz Jeremy
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back