Easy way to add BoxOver text to images and links

nuken · Posted: Wed May 13, 2009 3:58 pm

Here is an easy way to utilize the boxover.js with links and images in the nukeWYSIWYG editor.

In either Link Properties or Image Properties under the Advanced tab, you can put in the Advisory Title field

Code:

header=[] body=[]

with what ever information between the[] you want to be in the boxover. An easy and neat way to utilize the boxover.js that is already being called in your RavenNuke site.

Example:

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

Very nice! Thanks for posting this.

spasticdonkey · Posted: Thu May 14, 2009 10:25 pm

yes, very nice! i use boxover for a variety of purposes, so though I would share too Smile

here's an example of an extra class i added to includes/nukeSEO/nukePIE.css to use as an imageviewer

Code:

.nukePIEhdr4 {padding:1px; border:1px solid #000000; background-image: url(background.jpg); color:#000000; width:120px}

.nukePIEbody4 {padding:1px; width:400px}

Example of Use

Code:

<img src="images/imageSM.gif" width="200" height="109" title="cssbody=[nukePIEbody4] cssheader=[nukePIEhdr4] header=[SPW-251 SdKfz-251] body=[<img src="images/image.png">] singleclickstop=[On]" border="0" />

Result

notice you can use html in the boxover header and body, just have to replace < " > with < " > and do not use the [ or ] characters Smile

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

Also nice, thanks! Maybe we should title this: "Boxover: it's already there so why not use it?" Smile

nuken · Posted: Fri May 15, 2009 5:21 am

Wow... That is very cool spastic. Very useful little piece of javascript.

spasticdonkey · Posted: Fri May 15, 2009 7:32 am

Here's another example of using boxover as an imageviewer, but with a border instead of floating...
CSS

Code:

.nukePIEhdr3 {padding:1px; border:1px solid #000000; background-image: url(camoback3.jpg); color:#000000; width:400px}
.nukePIEbody3 {border:1px solid #000000; width:400px}

HTML

Code:

<A HREF="ww2archives-world-war-II-photos.html" title="cssbody=[nukePIEbody3] cssheader=[nukePIEhdr3] header=[126. USS SHAW exploding during the Japanese raid on Pearl Harbor. December 7, 1941. 80-G-16871] body=[<img src="images/ww2/medium/ww2-126.jpg" width="400" />] singleclickstop=[On]"><IMG SRC="images/ww2/small/ww2-126H.jpg" HEIGHT=75 WIDTH=94 BORDER=0 /></A>

NOTE: Make sure the popup image is the same width as the div, in this case 400px.
RESULT:

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

Sweet! A different type of "lightbox" function. More choice = better.

CodyG · Posted: Fri May 15, 2009 9:23 am

Can boxover.js be used for links?

I've tried something like this and it doesn't work.

Code:

<a href="domain.com/module/somemodule/index.php" header=[something] body=[something]> somelink</a>

spasticdonkey · Posted: Fri May 15, 2009 9:27 am

yes it can be used for links, try:
<a href="index.php" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=[something] body=[something] singleclickstop=[On]"> somelink</a>

nuken · Posted: Fri May 15, 2009 9:33 am

it has to be called under title. title="header=[something] body=[something]"

In the nukeWYSIWYG editor under image properties Advanced tab in the Advisory Title field all you need to do is put

Code:

header=[something] body=[something]

and it will use the default colors for boxover.js which are light blue header and white body. That can be changed in the boxover.js file.

nuken · Posted: Fri May 15, 2009 9:36 am

You got to love the RavenNuke bling.... Great idea of utilizing the boxover.js Spastic. I'm sure many users will thank you.

CodyG · Posted: Fri May 15, 2009 10:28 am

When keeping it simple is my fav motto, I don't know why I love the bling, I just do. :-/

Quite a few of my sites are geared toward the elders. They have complained that the header links are not clear enough. For example: Calendar.

You and I would think this word is explanation enough but not everyone agrees. So, I'm going to try the boxover.js method to expand Link awareness: ie: Calendar will boxover with View Activities | Submit an Event.

I hope it works with a maxed out accessibility browser.

CodyG · Posted: Fri May 15, 2009 10:38 am

nuken... thanks for the clue and = signs were required
for example.

Code:

<a href="modules.php?name=GCalendar" title="header=[Calendar] body=[View Activities | Submit an Event]">This Month</a>

nuken · Posted: Fri May 15, 2009 10:56 am

oops.... I changed it. Thanks.

CodyG · Posted: Fri May 15, 2009 11:19 am

I get an answer... I have another question. Wink

in boxover.js
on line 35
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif">  '+dvHdr.innerHTML;

What does it mean and where is the info.gif?

spasticdonkey · Posted: Fri May 15, 2009 12:28 pm

i think that is used for the nukeSEO admin boxover

and boxover will work with any type of title, div, image, a, or anything else that has a title field Smile

the only downside to boxover is search engines will index the title as it appears, since it doesn't load the js file... But I'm willing to live with that..

spasticdonkey · Posted: Fri May 15, 2009 1:50 pm

Well since we are brainstorming here for all things boxover, here's another Smile

This one is dependant on the

Only registered users can see links on this board!
Get registered or login to the forums!

module from Slaytanic Scripts; so if you have it setup give it a spin. Just made a couple minor edits to the current modules block, and voila Smile

Mouseover module descriptions!! Smile

blocks/block-Modules.php
FIND:

Code:

/* Now we make the Modules block with the correspondent links */

$content .= '<big>·</big> <a href="index.php">'._HOME.'</a> ';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a> ';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a> ';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a> ';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a> ';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'">'.$m_title2.'</a> ';
}
}
}

Replace with:

Code:

/* Now we make the Modules block with the correspondent links */

$content .= '<big>·</big> <a href="index.php">'._HOME.'</a> ';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a> ';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a> ';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a> ';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a> ';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]">'.$m_title2.'</a> ';
}
}
}

one may wish to edit this mod so that it only displays to registered users, for SEO reasons... i actually used this for something else and threw it together in a few minutes Smile

so here's that edit, making it display only to registered users, replace as above using this instead:

Code:

/* Now we make the Modules block with the correspondent links */

$content .= '<big>·</big> <a href="index.php">'._HOME.'</a> ';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if(is_user($user)){
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
$motitle ='title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=['.$modmn.'] singleclickstop=[On]"';
}else{
$motitle ='title="'.$m_title2.'"';
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
}
}
}

nextgen · Worker Joined: Sep 28, 2006 Posts: 135 Location: Maryland

some excellent ideas here guys. Thanks so much for these.

CodyG · Posted: Fri May 15, 2009 5:28 pm

That menu boxover is exactly the type of functionality I'm looking for!!

Unfortunately, the site for the Dynamic Keywords module is down, atm. I'll try later.

spasticdonkey · Posted: Fri May 15, 2009 5:58 pm

cool...

I'm not an SQL expert so I have no idea how efficient the DB calls are, but if you are displaying to reg. users only it couldn't be too detrimental to your site performance. Maybe someone with more knowledge in that area can let me know how I did Rolling Eyes

Even if you later decide to use nukeSEO Dynamic HEAD Tags (of which I'm salivating over) you should still be able to run Dynamic Keywords (DK) too, just remove the core edits. Might actually be better, as you can tailor your DK descriptions more toward humans, and forget the SEO...

On a related note, you might find it's difficult to come up with descriptions for every module (i did, have 67 modules on one site, lol), but the boxover script degrades nicely, if the [body] is missing it isn't displayed Smile

btw, i think the problem atm with sourceforge is the subdomains... try this route for DK

Only registered users can see links on this board!
Get registered or login to the forums!

Guardian2003 · Posted: Sat May 16, 2009 1:38 am

This is fantastic to see community members contributing their idea's on getting the most from what is already available.
I have made this post a Sticky.

spasticdonkey · Posted: Sat May 16, 2009 10:35 am

nuken wrote:

You got to love the RavenNuke bling....

maybe we need a RavenNuke Bling forum Smile

I should really be working on other things this morning, but this is so much more fun Smile

If you really want to be descriptive about your modules, how about adding a module icon to the mouseover?

i used some tango icons for the sake of a quick example, but you could really go whatever direction you want Smile

For this example we'll use .png images but that can be changed in the edit below. Just keep them all the same px size and format.

Create a folder images/modlogo and add an image for each module, naming it as it appears in the module directory, i.e. Members_List.png , Your_Account.png , etc...
here is an example with only a few images

Only registered users can see links on this board!
Get registered or login to the forums!

it is also set to default to logo.png for any modules that don't have an icon

so after you have been playing with icons for hours (lol) and created one for each module in the menu, you are ready for the edit Smile

Replace as above (this only displays to reg. users)

Code:

/* Now we make the Modules block with the correspondent links */

$content .= '<big>·</big> <a href="index.php">'._HOME.'</a> ';
$result3 = $db->sql_query('SELECT * FROM ' . $prefix . '_modules WHERE active=1 AND title!=\''.$def_module.'\' AND inmenu=1 ORDER BY custom_title ASC');
while ($row3 = $db->sql_fetchrow($result3)) {
$groups = $row3['groups'];
$m_title = stripslashes($row3['title']);
$custom_title = $row3['custom_title'];
$view = intval($row3['view']);
$m_title2 = ereg_replace('_', ' ', $m_title);
if (!empty($custom_title)) {
$m_title2 = $custom_title;
}
if(is_user($user)){
// logo config
$mlogowidth = 32; // logo width
$mlogoheight = 32; // logo height
$mlogoext = 'png'; // logo file extension i.e. jpg gif png
// logo config
$modlogo = "images/modlogo/$m_title" . ".$mlogoext";
if(!(file_exists($modlogo))) $modlogo = "images/modlogo/logo.$mlogoext";
$resultmn = $db->sql_query('SELECT description FROM ' . $prefix . '_keywords WHERE title=\'' . $m_title . '\'');
$rowmn = $db->sql_fetchrow($resultmn);
$modmn = $rowmn['description'];
$motitle ='title="cssbody=[nukePIEbody] cssheader=[nukePIEhdr] header=['.$m_title2.'] body=[<div style="FLOAT: left; MARGIN: 2px 2px 0.2em 0.2em; WIDTH: '.$mlogowidth.'px"><img src="'.$modlogo.'" height="'.$mlogoheight.'" width="'.$mlogowidth.'" border="0" />  </div>'.$modmn.'] singleclickstop=[On]"';
}else{
$motitle ='title="'.$m_title2.'"';
}
if ($m_title != $main_module) {
if ($view == 0) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 1 AND ((is_user($user) AND is_group($user, $m_title)) OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 2 AND is_admin($admin)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view == 3 AND (paid() OR is_admin($admin))) { //RN0000119, RN0000317
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
} elseif ($view > 3 AND in_groups($groups)) {
$content .= '<big>·</big> <a href="modules.php?name='.$m_title.'" '.$motitle.'>'.$m_title2.'</a> ';
}
}
}

edit this part of the code to suit your needs, defining the image width, height, and file extension

Code:

// logo config
$mlogowidth = 32; // logo width
$mlogoheight = 32; // logo height
$mlogoext = 'png'; // logo file extension i.e. jpg gif png
// logo config

one last note, the taller your image, the longer your description will have to be, or the image will hang over the bottom side of the boxover... have fun! Smile

nextgen · Worker Joined: Sep 28, 2006 Posts: 135 Location: Maryland

A word of warning for Autotheme users. Most of the above edits will not show when using a basic autotheme. You will need to do some extra coding in your autothemes config to have the edits to work.

nextgen · Worker Joined: Sep 28, 2006 Posts: 135 Location: Maryland

Hey guys can i use this in the Messages module > For Links etc

kguske · Site Admin Joined: Jun 04, 2004 Posts: 6044

More RavenNuke(tm) bling on the way with nukeSEO(tm) DH!

nukeSEO(tm) DH requires nukeNAV(tm), which uses 2 jQuery plugins: ColorBox (for modal popups) and clueTip (for tooltips).

ColorBox will be loaded all the time and will enable lightbox popups for images simply by adding a link to the image with the class colorbox on the link. BLING!

Last night, I tested some simple changes to FCKeditor, based on nuken's cool Slimbox and Facebox addons for nukeWYSIWYG(tm), to make it even easier to take advantage of this and even have image galleries (popup an image, then have next, previous to show the next image - or whatever link in the modal popup) simply by specifying the same rel= attribute on the links. BLING! BLING!

clueTip can replace BoxOver and has an advantage over BoxOver: it uses the same title tag to define the content of the popup, but instead of using header=[something] body=[something], it uses a delimiter | between the popup title and body for even better SEO, so something like this:

Code:

... title="Tooltip Title|Tooltip body"...

BLING! BLING! BLING!

One disadvantage of clueTip vs. Boxover: you can't define the popup style on the fly in clueTip. It needs a class with existing CSS.

If I get a chance, I'll do a little YouTube demo...