Hola amalgama, para dividir la foto en varias tienes que crear un mapa <map>, con distintas a areas <area>, que las defines por coordenadas en la imagen. Esto lo puedes hacer editando la imagen con un editor o simplemente si usas un programa para crear paginas web este deberia hacertelo.
Luego para cambiar el texto del campo, haces un onmouseover en cada area y le das la intruccion: onmouseover="campo.innertext='la descripcion del pueblo'"
Ejemplo, copialo y pegalo en un htm para ver como funciona:
<html>
<head>
</head>
<body>
<map name="nombre_mapa">
<area shape="poly" coords="14,11,143,11,142,53,21,55,22,30,10,12,11,10" href="pagina.htm" title="nombre_pueblo" onmouseover="campo.innerText='Descripcion del primer pueblo'">
<area shape="poly" coords="13,76,87,79,143,54,197,53,203,39,248,41,244,99,12,102" href="pagina.htm" title="nombre_pueblo2" onmouseover="campo.innerText='Descripcion del segundo pueblo'">
<area shape="poly" coords="148,12,145,11,252,9,249,36,197,38,193,49,146,51" href="pagina.htm" title="nombre_pueblo3" onmouseover="campo.innerText='Descripcion del tercer pueblo'">
</map>
<img src="images/Noticias.gif" border="0" width="259" height="114" alt="" usemap="#nombre_mapa">
<input type="text" name="campo" size="40" maxlength="256">
</body>
</html>