Welcome to HTML Imagemap Creator project!

Create clickable HTML hyperlink imagemaps from R graphics.

Imagemaps in R

This package enables you to build clickable HTML imagemaps in R. Imagemaps are graphics with clickable hotspots in various shapes that when clicked can take the user to a new web page or activate javascript actions. Some knowledge of HTML is required.

Imagemap examples

This example illustrates all the possible clickable objects supported. Currently the links go nowhere:

Note that:

The default link is valid everywhere that no other link is specified. Default links are optional.
The two overlapping rectangles have to be defined in the right order. Imagemaps will always hit the first matching region. The imagemap package will keep the order of definition.
I've only made three of the points clickable.
The text clickable area is not exact - the strheight function in R does not seem to measure descender heights.
The hole in the rectangle is made by defining a rectangle with no href argument.

Here is the code to produce this example: firstly the code that plots the graphics, makemenu.R:

plot(1:10,asp=1)
xy <- list(x=c(2.9,1.3,2.4,4.2,4.6,2.9),
           y=c(9.8,8.8,7.0,7.0,8.6,9.8))
lines(xy)
text(3,8.2,'imPoly')

rect(6.1,2.1,7,2.9)
text(6.5,2.5,'hole')

rect(6,2,10,4)
text(8,3,'imRect(1)')

rect(5,1,10.2,4.2)
text(6,1.3,'imRect(2)')

symbols(8.5,8.5,circle=1.5,add=TRUE,inches=F)
text(8.5,8.5,'imCircle')

par(cex=2)
msg <- expression(paste("imText: ",hat(beta) == (X^t * X)^{-1} * X^t * y,sep=''))
text(2,4, msg, srt=45)
par(cex=1)

title("imDefault")

text(8,5.5,'imPoints',pos=4)
arrows(8,5.5,5.2,5,lty=1,length=.1)
arrows(8,5.5,6.1,5.9,lty=1,length=.1)
arrows(8,5.5,7,6.8,lty=1,length=.1)

Then the code that creates the imagemap object, and hence the HTML and PNG file. It sources the makemenu.R file in order to draw on the PNG device opened by the imagemap. This file is makemenuPNG.R:

im <- imagemap("Menu",height=500,width=500)

source("makemenu.R")

addRegion(im) <- imPoly(cbind(xy$x,xy$y),href="#poly")

addRegion(im) <- imCircle(8.5,8.5,1.5,href="#circle")

for(i in 5:7){
  addRegion(im) <- imPoint(i,i,.2,.2,href=paste("#point",i,sep=''))
}

par(cex=2)
addRegion(im) <- imText(2,4,msg,pars=list(srt=45),href="#text")
par(cex=1)

addRegion(im) <- imRect(6.1,2.1,7,2.9)
addRegion(im) <- imRect(6,2,10,4,href="#rect1")

addRegion(im) <- imRect(5,1,10.2,4.2,href="#rect2")

addRegion(im) <- imDefault(href="#default")
createPage(im,"Menu.html",imgTags=list(border=0))
imClose(im)

The two sets of code are kept separate so that I can call the first one on a conventional plot device to check the layout, and then I can just source the second one to create Menu.html and Menu.png. Then I can open Menu.html in a browser and click away.

The project summary page you can find here.