Image Mapping

[nlottig94]

So I found an image mapping generator: http://imagemap-generator.dariodomi.de/

I also found some guidelines: http://www.javascriptkit.com/howto/imagemap.shtml AND http://www.w3schools.com/tags/tag_map.asp

[nlottig94]

Can we look at this tomorrow?? @ebeshero

[ebeshero]

Yes! Let's give it a whirl: Choose a ms image we can try out together.

[ebeshero]

@nlottig94 @amielnicki I'm hunting about here, and I think the answer to how we highlight the image map and correlate to our variants is with JavaScript! I've seen lots of really simple examples that, on mouse-hover or mouse-click of an area of an image map, generate some text or trigger some function. I think the solution here is likely to be that we write JavaScript that on click of a variant in Dickinson's poem fires a function that generates a highlighted border (or some kind of visual highlighting or change in coloration) over the image-mapped area. The thing I need to figure out is how to highlight the border on an area!

[ebeshero]

Here's where I am now: http://www.svennerberg.com/2008/09/imagemap-rollover/ And from reading this, I think we may want to make our image maps with Photoshop, so we can slice layers.

[ebeshero]

I have been learning about some different approaches to highlighting areas in an image map, and when we meet in class this morning, I want to spend time with your group going over some basic strategies we could try. As @nlottig94 and I were discovering yesterday, this isn't a simple process, because image maps aren't designed for the areas you've drawn to be modified with CSS properties.

An image map in HTML is basically a way of marking areas on an image so that one can determine their "clickable" coordinates (or areas of entry with a mouse). To make an image map, one uses software to draw shapes on an image, and output some HTML code that defines a "map" of the image with coordinates for area elements (where the shape you drew is an area). It's an old technology, available from the early days of the worldwide web, and it was designed to make it possible to click on an area and be taken to a link (which is why area elements have an @href attribute. You can click on an image to make it link out somewhere else or to some location on your webpage. And you can link from elsewhere on your page into the image. But because an area is literally defined only by coordinate information and isn't literally drawn the way SVG is, you can't simply grab an area element in an image map with CSS and alter its appearance, because areas don't have appearance properties. What you can do is add a "tooltip" with a simple @title attribute so that you get a little information about an area in a tiny pop-up box when your mouse touches that area. I've now managed to link into an image map from a variant we coded in Dickinson's poem, and produce a little tooltip on mousehover over the image. See https://github.com/ebeshero/EmilyDickinson16/blob/master/imageMappingExamp.html and https://github.com/ebeshero/EmilyDickinson16/commit/744525c892fc6910f207e0cc211735ef712b3f1e (working from my old code for the project just to see how things work).

And yet, people produce highlighted image maps, using CSS, JavaScript, or some combination of the two. Here are some different approaches I've found:

1) Make multiple images and combine them:

• One approach could be to use CSS sprites: See http://alistapart.com/article/sprites (Let's look up close at some examples in here to see how this works: http://alistapart.com/d/sprites/ala-image3.html . We want to view page source here and look at the underlying image: http://alistapart.com/d/sprites/test-3.jpg )

2) Another approach with JavaScript involves using HTML block-level elements (like list elements: <ul> and <li>). Make a distinct image of the variant text you isolated in the image map, and write CSS to give an <li> element a background image, and to enter coordinates (like how coordinates are used in the CSS sprite example above) so the <li> is literally positioned just over the point in the mapped image where you drew its area. Use JavaScript to show/hide the block-level element. A thought I had about this approach with HTML block-level elements is it could be pretty versatile if we created small "snips" of variant images and made them appear where we like, perhaps somewhere else on the page besides superimposed over the poem.

3) There are some interesting JQuery tools for this: JQuery is a library of JavaScripts that you have to download and adapt to your purposes, and in our class our rule is that we don't allow you to use libraries because we want everyone to understand all the code we're writing. We could decide as a team to make an exception here maybe for something like this: http://www.outsharked.com/imagemapster/default.aspx?what.html , but let's take a closer look at discuss some of the issues involved, and let's see if what we have now is manageable.

Let's discuss the possibilities here. @nlottig94 @amielnicki @blawrence719 @brookestewart

[ebeshero]

Okay--so we worked out an alternative approach in which @nlottig94 and @amielnicki are working on creating box-marked images that will respond to javascript functions @amielnicki has written for the buttons on the pages. We'll draw boxes around the variant areas with to generate marked images, and then apply image-mapping (either with the web-based software Nicole was using before or in Photoshop), and @nlottig94 will add an @title attribute to contain information about the variant (probably the transcribed text of it) which will appear on mouse hover over the area. Nicole also might as well add a distinct @id to each area element (along with an @title) in case we ever want to link directly to an area of the image from elsewhere on the page or from a different page.

Alex's XSLT and JavaScript work have been really impressive and we're making a pretty impressive interface to study these poems! @blawrence719 is going to be doing a write-up of analysis and conclusions, and write text introducing the site. @brookestewart will work on determining a good quantitative analysis to compare the various editions to Dickinson's original...

[nlottig94]

All images (poems) are done except for poem 11. Also, I have to go in and set up all of the titles and the hrefs, but that's a simple task compared to the photoshop and image mapping!! Goodnight!

[ebeshero]

Wow, @nlottig94 ! That is speedy work! How was Photoshop for image mapping? (Want to try writing a tutorial on the process and compare available tools for it (after the semester is over?)

[nlottig94]

@ebeshero I actually used the tool I found online for it, but I do have poem 11 to do, so I will try to figure out how to do that on photoshop. Also, I just included the @alt and @title to the original Dickinson poem 1...I want someone to look at this before I go on. It has taken me an hour just to do that one, so it's hard work. If anyone would be willing to split the work load, I'd appreciate it! I also wanted to make sure that this is what I am supposed to say within these attributes (why these sections are highlighted). Please let me know, guys. Thanks!

@amielnicki @brookestewart @blawrence719

[ebeshero]

@nlottig94 I'm looking at your @title attributes here at https://github.com/ebeshero/EmilyDickinson16/blob/master/dickinson-image-mapping.html , and wow--that is intensive! It's also very old-fashioned (though you may not know this!)--because you are creating the kinds of notes that would appear in a printed edition of Dickinson's poems, when you can't do the dynamic highlighting that Alex is preparing with JavaScript on the website. I am not sure it is necessary to do this kind of verbal description, but rather I was just suggesting to include the text of Dickinson's own handwriting at this point--really just a repeat of her variant line from the poem.

We could put other kinds of information here, but I think we don't need the full summary, which is (as you note) really labor intensive and actually brittle bc it is prone to an added layer of human error. I'd keep this tooltip limited just to a transcription of Dickinson's variant at this point, to aid the user in matching it to the text of the poem (complete with other variants) that they're seeing on the page. What do others think?

[nlottig94]

This sounds so much easier! Okay, I'll do that. Also, @ebeshero do you want me to put in the lines for all of the other published editions as well?

[nlottig94]

Also, do I put a dash in this, or the alternate — ?

[ebeshero]

Good questions! I was just thinking you only need our transcription of Emily Dickinson's text to appear in the tooltip mouseover, and it's really for people who have trouble reading her handwriting.

As for the dash, good question! Try our special character code first and see if it renders--and if it does, that's best to use. Does it work?

[nlottig94]

Okay, @ebeshero , I have figured out how to do image mapping in photoshop! I used this tutorial: http://www.ehow.com/how_4499356_make-image-map-using-photoshop.html

However, it almost seems harder to input this into the html document, but I'll do it for poem 11.

[nlottig94]

To add to the previous comment, I am getting the values of my coordinates, but I will have to input all of these into my html. So, for time's sake, I'm going to use the online generator. But I do know how to do it otherwise!!

[ebeshero]

@nlottig94 After you save your file in Photoshop, can you then reopen it in oXygen as HTML, and does it then have the same code that the web tool generates?

It may well be the web tool is easiest for this, but it's worth an experiment!