Disjoint rollover in Fading

Similar Questions

• Default image in CSS disjointed rollover

  I have 5 pictures that arise as disjoint with 5 links CSS rollovers. How can I make the one by default, that appears when the page loads, until the user points on one of the links? I tried placing the first photo on the page, just as you would for any chart, but I can't get the pictures of reversal to align with him in Safari AND FF. When I'm lined up in a browser, it is slightly outside the other. I tried the position in pixels, percentage and ems with no luck. Only should not be something in the CSS that made one of photos by default? Thank you.

  / * working capital change color * /.

  {#rollover}
  padding: 0 1px 1px;
  left margin: 0;
  Police: "BOLD" to 10px Verdana, without serif.
  text-align: center;
  }

  #rollover li {}
  list-style: none;
  margin: 0;
  display: inline;
  border-top-style: none;
  border-right-style: none;
  border-bottom-style: none;
  border-left-style: none;
  text-align: left;
  }

  #rollover li a {}
  text-decoration: none;
  background-color: #FFFFFF;
  }

  #rollover li a: link {}
  color: #448;
  text-align: center;
  }

  #rollover li a: visited {}
  color: #667;
  text-align: center;
  }

  #rollover li a: hover, #rollover li a: active, #rollover li a: focus {}
  color: #FFF;
  visibility: visible;
  text-align: center;
  background-color: #000000;
  }

  / * disjoint image rules * /.

  #rollover li a span {}
  visibility: hidden;
  Display: block;
  position: absolute;
  Left:27.8%; / * adjust the position of the image in % or px as needed * /.
  top: 0%; / * adjust the position of the image in % or px as needed * /.
  text-align: center; / * color: #666; * /
  }

  #rollover li a: hover span, #rollover li a: active span, #rollover li a: span {emphasis
  visibility: visible;
  }

  You will need to create a division of default image or layer on the page with exact positioning even as your container disjointed images.

  See this DEMO for more details:

  http://ALT-Web.com/demos/CSS-disjointed-menu-rollover.shtml

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  www.Alt-Web.com/
  www.Twitter.com/ALTWEB

• Rollover image fading or color for thumbnails, slideshow of thumbnails-standard

  I know that this could be done with triggers, but is it possible for the thumbnails? I tried the triggers when I hover over the thumbnail goes in the fade, but when I click on the image will not develop. I know that the fade is in the way, so, basically, is there a roll of fading for thumbnails instead of using triggers?

  Hello

  So to understand correctly, you want to apply fade in effect to thumbnails that triggers the slideshow?

  You can try to set state for each thumbnail and apply the opacity with any selected color.

  Thank you

  Sanjit

• Disjoint rollover help

  Hi all.

  Here's one simple thing I want to do:

  A page is configured with a list of names of artists (see photo).  When the user roves smile on each name, I want a small thumbnail of their work to appear more to the right.  Pretty - easy disjoint bearings - using onMouseOver and onMouseOut commands in the Panel behaviours and it works very well for each artist.  But... If the user clicks on one of the names, I want to link to another page.

  I tried to link, but it does not work.  Do I need another behavior?

  I tried to link, but it does not work.  Do I need another behavior?

  Then, you make a mistake during the attempt.  It will work.

  In addition, you can find another thread on this forum of interest - subject = 'Swap Image Setup'

• Disjoint rollover question

  I have a floor plan of a shopping center with 24 buttons of reversal.  Each button has been sliced and linked to an image (image swap) which shows the front of a store.  All photos (24 total) President in the same place on the canvas.  Here's my problem, in the preview, only ten buttons works.  No matter how I arrange and rearrange behaviors, only ten buttons will establish a link to the photos.  I tried several times and the result is the same. Fireworks puts a limit on the number of bearings rambling?  I use an old version (mx)... person knows if later corrected it?  Any help is definitely appreciated!

  No, you can do :-)

  To make the clickable area stains, use thw Hotspot on the slice tool and add the link.

  I have remove the restore image but you will need to add the second target to each trigger. Have a Virgin State or insert a new State for those who need

• Subtitle in a disjoint rollover

  Using Dreamweaver CS3 (Windows XP), is there a simple way to add captions to the bearings rambling?
  My goal is to click on a thumbnail, and when the image is projected on the poster, I want a caption that appears below.
  Can you please help me with this
  Thank you

  You can use the text behavior defined for Exchange images and easy to add a caption:

  example here:

  http://DreamweaverResources.com/tutorials/set-text-of-layer/

• disjoint rollover

  I'll try to explain... I have 10 miniature pictures. I would like to display thumbnails and when you hover over them will appear the magnified image. Here is the code I used...
  
  on mouseEnter
  Sprite (34) .visible = TRUE
  end
  
  on mouseLeave
  Sprite (34) .visible = FALSE
  end
  
  
  Each image is in a different channel and nothing else is in this channel. When I play the movie thumbnails won't work unless I have first click on the last of them, and then they will work. Any thoughts on what I could do?
  
  Thank you

  Here is a very simple example:
  http://www.DDG-designs.com/downloads/thumbnail.zip

  This should explain the process for you.

  --
  Rob
  _______
  Rob Dillon
  Adobe Community Expert
  http://www.DDG-designs.com
  412-243-9119.

  http://www.Macromedia.com/software/trial/

• Disjoint content bearing fixed spot

  I'm doing a disjointed rollover, but after I have a grid of thumbnails, I want my enlargemnt be contained in a specific area. I have this case it's the right saide sidebar. I found a good tutorial that got me this far, but can't seem to find how to make the next step. I don't want the enlargemnt compared to thumbnai. I want it in a fixed position.

  Here is my code so far:

  < ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / IN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > ""

  " < html xmlns =" http://www.w3.org/1999/xhtml ">

  < head >

  < meta http-equiv = "Content-Type" content = text/html"; charset = utf-8 "/ >"

  < title > Untitled Document < /title >

  < style type = "text/css" >

  <!--

  {body

  Police: 100% / 1.4 Verdana, Arial, Helvetica, without serif.

  background-color: #4E5869;

  margin: 0;

  padding: 0;

  Color: #000;

  }

  / * ~ ~ Tag of the element selectors ~ ~ *.

  UL, ol, dl {/ * because of variations between the browsers, it's best practices to zero padding and the margin on lists.} For consistency, you can specify the amounts you want to here, or on the list (LI, DT, DD) items they contain. Don't forget that what you're doing here cascade to the .nav list unless you write a more specific selector. */

  padding: 0;

  margin: 0;

  }

  H1, h2, h3, h4, h5, h6 {p}

  margin-top: 0;     / * remove the top margin works around a problem where margins can escape from their container div. The margin of the low rest it will take away from all of the following items. */

  padding-right: 15px;

  padding-left: 15px; / * adding padding to the sides of the elements in divs, instead of divs themselves, gets rid of any mathematical model of box. A div nested with side pads can also be used as an alternative method. */

  }

  an img {/ * this switch how to remove the default blue border displayed in some browsers around an image when it is surrounded by a link * /}

  border: none;

  }

  / * ~ ~ Style for your site links must remain in this order - including the Group of selectors that create the hover effect. ~~ */

  a: link {}

  color: #414958;

  text-decoration: underline; / * unless you style your links appear to be extremely unique, it is best to predict stresses quick visual identification * /.

  }

  a: visited {}

  color: #4E5869;

  text-decoration: underline;

  }

  a: hover, a: active, a: focus {/ * this group of selectors will give a browser keyboard the same experience of hovering as the person using a mouse. * /}

  text-decoration: none;

  }

  / * ~ ~ This container surrounds all the other div tags giving them their percentage width ~ ~ * /.

  . Container {}

  Width: 80%;

  Max-width: 1260px; / * a max-width may be desirable to keep this provision to become too wide on a big screen. This keeps the more readable line length. IE6 does not respect this statement. */

  min-width: 780px; / * a min-width may be desirable to keep this provision to become too narrow. This keeps the more readable line length in the side columns. IE6 does not respect this statement. */

  background-color: #FFF;

  margin: 0 auto; / * set to auto on the sides, coupled with the width available to the centres. It is not necessary if you set the width of the .container to 100%. */

  }

  / * ~ ~ the header is not given a width. It will extend to the entire width of your layout. It contains an image placeholder to be replaced by your own logo linked ~ ~ * /.

  . Header {}

  background-color: #6F7D94;

  }

  / * ~ ~ These are the columns for page layout. ~~

  (1) padding is only placed on the top and/or bottom of the divs. The elements contained in these divs have padding on their sides. This avoids any «mathematical model of box» Keep in mind, if you add lateral pads or border to the div itself, it will be added to the width that you set to create the * total width. You can also remove the padding of the element inside the div tag, and place a second div inside it with no width and padding necessary for your design.

  (2) no margin was given to the columns, because they all floated. If you need to add the margin, avoid placing on the side you're floating into (for example: a right margin on a div set to float to the right). Many times, padding can be used instead. For divs where this rule needs to be broken, you must add a statement of ' display: inline ' to the rule of the div to tame a bug where some versions of Internet Explorer double the margin.

  (3) given that the classes can be used several times in a document (and an element can also have several classes applied), the columns have received the names of classes instead of IDs. For example, two sidebar div could be stacked if necessary. These can easily be changed to the ID if that's your preference, as long as you don't use them once per document.

  (4) If you prefer your nav on the right instead of the left, simply float those columns as the opposite direction (straight instead of left all) and they will return in reverse order. There is no need to move the div in the HTML source code.

  */

  {.sidebar1}

  float: left;

  Width: 20%;

  background-color: #93A5C4;

  padding-bottom: 10px;

  }

  . Happy {}

  padding: 10px 0;

  Width: 60%;

  float: left;

  }

  {.sidebar2}

  float: left;

  Width: 20%;

  background-color: #93A5C4;

  padding: 10px 0;

  }

  / * ~ ~ This group selector gives the lists in the domain content space ~ ~ * /.

  . Content ul, ol {} content

  padding: 0 15px 15px 40px; / * This padding reflects the right padding in the titles and the paragraph above net. Padding was placed on the bottom for the space between the other elements in the lists and on the left to create the withdrawal. These can be adjusted as desired. */

  }

  / * ~ ~ The list of navigation styles (can be removed if you choose to use a contextual menu premade as Spry) ~ ~ * /.

  UL. NAV {}

  list-style: none; / * This command deletes the list marker * /.

  border-top: 1px solid #666; / * This creates the top border for the links - all the others are placed using a bottom border on the LI * /.

  margin-bottom: 15px; / * This creates space between the following content browsing * /.

  }

  {ul li. NAV

  border-bottom: 1px solid #666; / * This creates separation button * /.

  }

  UL. NAV, the ul.nav: visited {/ * these selectors of grouping allows you to ensure that your links to retain their look button even after the ongoing visit * /}

  padding: 5px 5px 5px 15px;

  display: block; / * Gives the link properties block causing it to fill the whole container LI. This causes the entire area responds to a mouse click. */

  text-decoration: none;

  background-color: #8090AB;

  Color: #000;

  }

  UL. NAV a: hover, ul.nav one: ul.nav active,: focus {/ * this changes the background and color of text for browsers of the mouse and the keyboard * /}

  background-color: #6F7D94;

  color: #FFF;

  }

  / * ~ ~ Footer ~ ~ * /.

  .footer {}

  padding: 10px 0;

  background-color: #6F7D94;

  position: relative; / * This gives hasLayout IE6 to well clear * /.

  Clear: both; / * This clear property forces the .container to understand where the columns end up and contain them * /.

  }

  / * ~ ~ various float/clear classes ~ ~ * /.

  .fltrt {/ * this class can be used to float right to the item in your page.} The floating element must precede the element it should be next to the page. */

  float: right;

  left margin: 8px;

  }

  .fltlft {/ * this class can be used to float an element on your page.} The floating element must precede the element it should be next to the page. */

  float: left;

  right margin: 8px;

  }

  .clearfloat {/ * this class can be placed on a < br / > or div empty as the final element after the last div floating (in the #container) if the #footer is removed or put out the #container * /}

  Clear: both;

  height: 0;

  font size: 1px;

  line-height: 0px;

  }

  . Happy h1 img {}

  height: 100%;

  Width: 100%;

  }

  #rollover a {}

  border: none;

  text-decoration: none;

  padding: 0 0.5em 0 0.5em; / * the space between icons * /.

  position: relative; / * delete rule position if the images full size will share the same display area. **/

  }

  #rollover a span {}

  visibility: hidden;

  background-color: #FFF;

  display: block;

  position: absolute;

  / * adjust the positioning of the images full size in px or % * /.

  left: 250px;

  top:-140px;

  / * optional image captions * /.

  do-size: 12px;

  line-height: 1.2;

  color: #666;

  text-align: right;

  position: absolute;

  top: 0 px;

  right: 20px; / * optional image borders & padding * /.

  }

  #rollover a: hover span, #rollover a: active duration, #rollover one: duration of development {visibility: visible ;}}

  #rollover a: hover, #rollover a: focus

  {visibility: visible ;}}

  ->

  < / style >

  <!-[if lte IE 7] >

  < style >

  . Happy {right margin:-1px ;} / * this negative margin of 1px can be placed on any of the columns in this layout with the same corrective effect.} */

  UL. NAV a {zoom: 1 ;}}  / * the property zoom gives IE the hasLayout trigger to fix additional whiltespace between the links * /.

  < / style >

  <! [endif]-->

  "< script type =" text/javascript"src="includes/jQueryGallery/gallery.extend.js "> < / script >

  "< script type =" text/javascript"src="includes/jQueryGallery/jQueryGallery.js "> < / script >

  "< script type =" text/javascript"src="includes/jQueryGallery/jQueryGallery21.js "> < / script >

  "< link href="includes/jQueryGallery/jQueryGallery21.css "rel ="stylesheet"type =" text/css"/ >

  < / head >

  < body >

  < div class = "container" >

  < div class = "header" > < a href = "#" > < img src = "" alt = "Insert here the Logo" name = "Insert_logo" width = "20%" height = "90" id = "Insert_logo" style = "background-color: #8090AB; Display: block; "/ > < / a >

  <! - end .header - > < / div >

  < div class = "sidebar1″" >

  < ul class = "nav" >

  < li > < a href = "#" > link a < /a > < /li >

  < li > < a href = "#" > connect two < /a > < /li >

  < li > < a href = "#" > link three < /a > < /li >

  < li > < a href = "#" > link four < /a > < /li >

  < /ul >

  < p > the links above demonstrate a basic navigation structure using a style with CSS unordered list. Use it as a starting point and modify properties to produce your own unique look. If you have need of flyouts, create your own by using a Spry menu, a menu widget from Adobe Exchange or a variety of other javascript or CSS solutions. < /p >

  < p > if you want the navigation along the top, simply move the ul.nav to the top of the page and recreate the style. < /p >

  <! - end .sidebar1 - > < / div >

  < div class = "content" >

  < h1 > < / h1 > < div id = "reversal" >

  < p >

  "< a href =" # "> < img src =" file:///C|/GSLD site Web/images/Civic/Civic Adjustments/a2mclobb_thumb.jpg"width ="81"height ="78"/ > / > < span > < img src =" file:///C|/GSLD site Web, images, Civic, Civic Adjustments/bloomfieldexterior.jpg "width ="768"height ="532"/ > < br / >

  Legend option #1 </span > < /a >

  "< a href =" # "> < img src =" SmallIcons/image.png"alt =" "/ > < span > < img src =" FullSize/image.jpg"alt =" "/ > < br / > legend #2 optionally </span > < /a >

  "< a href =" # "> < img src =" SmallIcons/image.png"alt =" "/ > < span > < img src =" FullSize/image.jpg"alt =" "/ > < br / > legend #3 optionally </span > < /a >

  < /p >

  < / div > < / p >

  < p > note that if you use the property inspector to access your image of the logo using the field of the CBC (instead of remove and replace the placeholder), you need to remove inline background and view properties. These inline styles only serve to make the placeholder logo displays in browsers for demonstration purposes. < /p >

  < p > to remove the inline styles, make sure that your CSS Styles Panel is updated. Select the image and in the properties of the CSS Styles Panel pane, right-click and delete the display and background properties. (Of course, you can always go directly in the code and remove the image inline styles or placeholder there.) < /p >

  < h4 > Internet Explorer conditional comments < / h4 >

  < p > these liquid page layouts contain an Internet Explorer conditional comment (CICE) to correct two problems. < /p >

  < ol >

  < li > browsers are inconsistent in the way which they circle sizes in percent layouts div. If the browser must make a number like 144.5px or 564.5px, so round up to integer closest. Safari and Opera round, rounds up to Internet Explorer and Firefox rounds a column upwards and the other downwards to fill the tank completely. These rounding problems can lead to inconsistencies in some layouts. In the IECC there is a negative margin of 1px to fix IE. You can move to one of the columns (and on the left or right) to meet your needs for layout. < /li >

  < li > the zoom property has been added to the anchor in the navigation list since, in some cases, the extra space will be rendered in IE6 and IE7. Zoom gives IE its property hasLayout exclusive to correct this problem. < /li >

  < /ol >

  <! - end content - >

  < / div >

  < div class = 'sidebar2' >

  Background < h4 > < / h4 >

  < p > by nature, will show the background color to any div for the length of the content. If you want a line instead of a color, place a border on the side of the content div (but only if it will contain more content). < /p >

  <! - end .sidebar2 - > < / div >

  < div class = "footer" >

  < p > this .footer contains the statement of position: relative; giving hasLayout in Internet Explorer 6 for the .footer and it erase properly. If you are not required to support IE6, you can remove it. < /p >

  <! - end .footer - > < / div >

  <! - end .container - > < / div >

  < / body >

  < / html >

  Here's the concept:

  1. Create a page with two pictures on it
  2. Give each image a name attribute (use the name field in the property inspector)
  3. Select the first image and apply the swap image behavior
  4. By filling in the details of the behavior, select the SECOND image in the field called "Images".
  5. Complete the behavior by navigating to the incoming image you want to REPLACE THE SECOND image

  Get it?  This approach requires that you already have a picture of "detention" on the page that will be replaced by the enlarged image of the behaviour of swap.

• Remote rollover in Dreamweaver CS3

  I want to do something like the effect obtained with the 'who' and 'why' buttons on this site- http://voicubojan.com/ . I don't know what to call to find out how to find how to do it. I have Dreamweaver CS3 and WindowsXP. Thanks for any help.

  Sharon

  He called a disjoint rollover.

  You can see in view Source in a browser the example in the link is actually switch the class CSS in the sidebar display: block (visible) to display: no (hidden)

  In the Dreamweaver behaviors panel (window > behaviors), you could also explore "the value of the text container.

• How can I stop a new logon page if someone clicks my rolling disjointed inadvertently?

  I just put in place a disjoint rollover navigation bar, (so they don't have to go to other pages to see a variety of images) - but I fear that people will accidentally 'click' on a roll and be directed to a new page of the image.  You can see the problem at http://kateharperdesigns.com/collections_folder/collections_kidquotes.html.

  I can't find a way to prevent this.

  Big problem is: when you flip the side navigation, it is fine.  But if you acidentally click one of them, you get taken out of the image page.

  Thank you-Kate

  Two ways to go that I can see.

  This helps in your page, for example-

  ../images/samples/kid_sample_advice.jpg" onmouseover="MM_swapImage('ximage','','../images/samples/kid_sam
  

  (1) in Design view, select each link and in the property inspector, change the value of link with "javascript:;" (without the quotes)

  or

  (2) in Code view, add this to each tag:

  onclick = "return false;"

  so our example would look like this:

  ../images/samples/kid_sample_advice.jpg" onclick="return false;" onmouseover="MM_swapImage('ximage','','../images/samples/kid_sam
  

  Now, what technique is better?  (2) is. (because a search engine) will be able to spider your images and b) with javascript off the coast, by clicking poster the image that would be otherwise inaccessible.

  Hope that helps

  --

   E. Michael Brandt
  
  www.divahtml.comwww.divahtml.com/products/scripts_dreamweaver_extensions.phpStandards-compliant scripts and Dreamweaver Extensions
  
  www.valleywebdesigns.com/vwd_Vdw.aspJustSo PictureWindowJustSo PhotoAlbum, et alia
  
  --
  

• Disjoint working capital with images of different size?

  Each tutorial explains the disjoint rollover images MUST be the same size, etc..  But for the type of photos that I work with, it is impossible to make them the same height.  This site is exactly what I'll do with images of different sizes used: http://www.warmbloods-for-sale.com/HorseDetail.asp?HorseID=21333 & UserID = 1775.  No idea how they achieve this?  Or any ideas on how I can manage the same effect with different sizes in Dreamweaver CS4?

  Do a Google search for Lightbox, litebox, floatbox, or look at the Image Gallery Magic of the seven project.

  Nancy O.
  ALT-Web Design & Publishing
  Web | Graphics | Print | Media specialists
  www.Alt-Web.com/
  www.Twitter.com/ALTWEB
  www.Alt-Web.com/blogspot.com

• using text to swap an image (disjoint overview)

  Hello

  I have a text on my page, which is also a link.

  It has a background color, which changes when my mouse passes over it.

  I also want an image on the page to swap with another image when my mouse over the text.

  Please can someone direct me to a site that explains how to create a disjointed rollover using text instead of an image.

  Thanks in advance

  On this page, you have several instances of code like this-

  
             

  Fuel:
  
             

  Just replace in this.

  
  Fuel:

  and add this to your CSS-

  label of TD {text-align: right ;}}

  Then you must ensure that the values in your tag 'from' attribute match the values that you used for your ID form field.  At present, a number of them do not.

  Then your page validates.

  Personally, I don't think it's worth the effort to migrate away from your leaking implementation.  And as far as I know, no one in this thread has recommended either you do that, or given you a suggestion as to how.  Achieve this with CSS only would require a good amount of changes to your code, so that each an item in your menu also contained a tag style display: block and was sized and positioned at the location where the image exchanged is now. Then, you must create an image SPRITE containing all your images in Exchange stacked vertically in a single graph that would be awarded as background image for the tag.  Then you would add the CSS necessary to swap the position of the background in the tag image to one that shows the right image to the overview.  It's too tedious for this effect, honestly...

• Text / Image of the rollover effects

  I can't try to figure out how to create a hover effect, when you hover over a text, an Image will appear in a separated / table / cell. I was able to map the rollover effects to specific locations / positions, but I cannot find a way so that he could appear in a specific cell. To top it off, I need to beable to get several images displayed in different cells when you hover over a text element.
  
  I'm open to almost anything that can accomplish this, Java Script, PHP, CSS, etc.

  On Friday, December 8, 2006 05:27:10 + 0000 (UTC), "Stupidav".
  wrote:

  > I'm unable to try to understand how to create a hover effect, which
  > when you hover over a text, an Image will appear in a table separate from .
  > cell. I was able to map specific locations rollover effects / positions.
  > but I can't understand how to do so that he could appear in a specific cell. On top of the
  > off I should beable get several images to show up in different cells when
  > you mouse over a text element.
  >
  > I am open to almost anything that can accomplish this, Java Script, PHP, CSS,.
  > etc.

  It's called a disjoint rollover. If you Google this term you will find
  a lot of help tutorial. This is one:

  http://www.DWfaq.com/tutorials/basics/disjointed.asp

  Good luck.
  --
  Steve
  Steve at flyingtigerwebdesign dot com

• disjoint swap image

  (DreamweaverMX)... I have a table with images flown over this nail you hover over (just for the looks by using a version of darker and lighter for the same image that has been created by selecting... Insert > interactive images > flight path images) and if you click on it you open a new page on top.
  
  Which works fine but now I also want to have a thumbnail image open to the right of the table as you mouseover so you can get an overview of what you would see if you clicked. I tried the tutorial of disjointed rollover, but I guess I'm doing something wrong.
  
  I created a layout cell to the right of the table that is the same size as the images to be swapped. One is a background which should give a space 'empty' if the mouse is not on one of the links. I tried to select the image in the table, and then adding an image to swap using the first background image (inserted in the layout cell) and the thumbnail image then, but he just create a rollover image in the layout cell that has not been affected by the mousover of the table images.
  
  Here is an example of the pages I want to change
  
  Advice or better suggestions?
  Steve

  Finally, I thought that it out - I needed to give images of the distinctive names on the one hand, and then I followed the tutorial below link. It includes the addition of a swap for the table image I picture described so I deleted the bearing, I had already done and started from scratch.

  http://www.communitymx.com/content/article.cfm?page=1&CID=EB7B9BAE3B5E11E8

• Create a Pop up link for pictures (lightbox?)

  Hello

  I did a bunch of thumbnails so that I can click on it and it would open up a bigger picture, but I can't seem to find a way to do it in Adobe Muse.

  I tried to use Lightbox, but I have no idea how to make a lightbox link to each image.  Is this possible? Are there ways to get around this?

  Image below, it's what I'm trying to go.

  Dropbox - 2015 of the capture of screen-08-21 23.08.56.jpg

  This has nothing to do with jQuery. You simply set the trigger of the visibility of the image basically to be your small image for example by using the ToolTip widget. Otherwise you can always search "disjoint rollover" and similar expressions to concoct your own CSS and code and insert it into the HTML Manual.

  Mylenium