Currently using the new ToolTip Magic to create a rollover / imagemap that drives a popup – which ABSOLUTELY ROCKS, BTW. Quickly, this tool is awesome for this non-flash solution that used to be commonplace. The client loves the initial preview too, but now it’s time to code the rest of the products/pop-ups which is where I’m coming into issues of the best approach and method of using TTM. Here is the initial preview of where I’m at:
http://www.premierindustrial.net/house.html (Site is heavily coded with P7 too ;)
(Many of the rollovers are not coded yet, just the ones on the right) I am currently using an image map with hotspots using the TAG attribute to trigger against the ALT tag that I have assigned to each hotspot. Like this:
<area shape="rect" coords="735,435,821,458" href="#" alt="XB9500" />
I am popping up a small chunk of content defined by an element, id= “product-pop-XXXX” where XXX will be a unique chunk of content to pop up. I have 2 pop-ups defined for testing (and one of them duplicated over a few different roll-overs, so you’ll see the same popup come up on different hotspots) I will eventually need to create dozens for the rest of the elements to pop up.
ContentSource: -Tooltip populated from: ElementID=product-pop-XXXX
I have ID = product-pop-XXX and some of it’s variables defined in CSS to style it. I have #product-pop-XXX to define the container, h1 and h2 to define the headings within, p to define the paragraph styling, and an image styling.
The issue is that when it’s now time replicate the rest of the content pop ups (a few dozen), I may be faced with replicating all the CSS elements too. Maybe I’m missing some back to basics CSS stuff, but how do I set a common set of CSS elements for the multiple elements that I’ll be popping up so I don’t have to create a custom ID set for each pop up?
Using just plain CSS speak, normally, I would do
#product-pop {…}
#product-pop h1 {…}
#product-pop h2 {…}
#product-pop p {…}
And then assign a class to define each of the specific elements
.xb9500 {…}
.xb9500 whatever {…}
And then the code would look like:
<div id="product-pop" class=”xb9500”>
{content here}
</div>
Is there a way for TTM to call the content from a class instead of an element? If I have to make a custom element set for each ID that gets called, that’s going to be a lot of duplicated CSS to create and worse, manage for future changes, etc. I just need to define the core #product-pop and all of it’s variables just once. Am I making sense?
Or, is there a better way to use TTM for this application. I’ve been reading through the manual and advanced procedures and can’t seem to see if there is a better setup or use of TTM for this particular use.
Thanks in advance! Can’t wait for this page to complete – it’s going to rock! And have a bunch of more applications/sites to use it on once I master it.
Blake
