Image Mapping #14

Closed
nlottig94 opened this Issue Dec 4, 2015 · 16 comments

Comments

Projects
None yet
3 participants
@nlottig94

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 4, 2015

Owner

Can we look at this tomorrow?? @ebeshero

Owner

nlottig94 commented Dec 4, 2015

Can we look at this tomorrow?? @ebeshero

@ebeshero

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 4, 2015

Collaborator

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

Collaborator

ebeshero commented Dec 4, 2015

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

@ebeshero

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 9, 2015

Collaborator

@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!

Collaborator

ebeshero commented Dec 9, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 9, 2015

Collaborator

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.

Collaborator

ebeshero commented Dec 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 9, 2015

Collaborator

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
744525c (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:
  1. 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.

  2. 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

Collaborator

ebeshero commented Dec 9, 2015

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
744525c (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:
  1. 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.

  2. 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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 9, 2015

Collaborator

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...

Collaborator

ebeshero commented Dec 9, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

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!

Owner

nlottig94 commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 10, 2015

Collaborator

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?)

Collaborator

ebeshero commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

@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

Owner

nlottig94 commented Dec 10, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 10, 2015

Collaborator

@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?

Collaborator

ebeshero commented Dec 10, 2015

@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 comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

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?

Owner

nlottig94 commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

Also, do I put a dash in this, or the alternate &#8212; ?

Owner

nlottig94 commented Dec 10, 2015

Also, do I put a dash in this, or the alternate &#8212; ?

@ebeshero

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 10, 2015

Collaborator

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?

Collaborator

ebeshero commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

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.

Owner

nlottig94 commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nlottig94

nlottig94 Dec 10, 2015

Owner

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!!

Owner

nlottig94 commented Dec 10, 2015

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

This comment has been minimized.

Show comment
Hide comment
@ebeshero

ebeshero Dec 10, 2015

Collaborator

@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!

Collaborator

ebeshero commented Dec 10, 2015

@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!

@amielnicki amielnicki closed this Dec 14, 2015

@nlottig94 nlottig94 referenced this issue Dec 17, 2015

Closed

Left To-Do #27

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment