Create a visible link between 2 images

[beral75]

hello,

I would like to know if it is possible to create a visible link by cliking on 2 images.

Let me explain myself:

It is as if you have an image(image1) and you would want to match this image with anoter one(image2) by cliking to the image1 and image2 and then a visible link will appear between both images.
Has anybody have any idea on how to do this??

Thnak you in advance

[Khalid Ali]

you can create a line between both images and make it visible when both images are clicked

[beral75]

Hi Khalid

This is exactly what I would like to do.
Can u please tell me how to do this.

[steelersfan88]

here's a simple script that allows you show the link upon clicking both images. it can probably be beterr, since i am not a css manual myself:<script type="text/javascript">

var did1 = "0"
var did2 = "0"

function show(num) {
num = num.toString()
var temp =
window["did"+ num] = "1"
if(did1 == "1" && did2 == "1") {
link.style.display = "block"
line.style.display = "none"
}
}

</script>

<img src="pic.jpg" height="100" width="100" onclick="show(1)"><BR>
<span id="link" style="display:none">Click <a href="here.html">Here</a> To Visit!</span>
<span id="line" style="display:block"><BR></span><img src="pic.jpg" height="100" width="100" onclick="show(2)">It contains a span for line also, this makes it appear that no line is being added when both images are clicked. the number of <BR> tags in the line span shoould be == to the number of lines the link span occupies.

[beral75]

thank u for the code

It works fine.
But my problems is as follow.

I have to colums (col1 and col2) for example.
In those columns I have several images.I would like to match the images from the col1 to the images from the col2 as follow

col1 col2

img1 img5
img2 img6
img3 img7

I would like to link img1 with img7 with a visible line for example.But I want to make it impossible to match img1 with img2(2 images which belong to the same column).

Can u help me please.

Thank u

[steelersfan88]

Forgive me for using tables:<script type="text/javascript">

var did1 = 0
var did2 = 0
var did3 = 0
var did4 = 0

function show(num) {
num = num.toString()
var temp =
window["did"+ num] += 1
if(window["did"+ num] == 2) {
document.getElementById('link'+ num).style.display = "block"
}
}

</script>

<table >
<tr VALIGN=center>
<td><center>
<img src="pic1.jpg" height="100" width="100" onclick="show(1)"><BR><BR>
</center></td>
<td width=160>
<span id="link1" style="display:none">Click <a href="here1.html">Here</a> To Visit!</span>
</center></td>
<td><center>
<img src="pic5.jpg" height="100" width="100" onclick="show(1)">
</center></td>
</tr>
<tr VALIGN=center>
<td><center>
<img src="pic2.jpg" height="100" width="100" onclick="show(2)"><BR><BR>
</center></td>
<td><center>
<span id="link2" style="display:none">Click <a href="here2.html">Here</a> To Visit!</span>
</center></td>
<td><center>
<img src="pic6.jpg" height="100" width="100" onclick="show(2)">
</center></td>
</tr>
<tr VALIGN=center>
<td><center>
<img src="pic3.jpg" height="100" width="100" onclick="show(3)"><BR><BR>
</center></td><td><center>
<span id="link3" style="display:none">Click <a href="here3.html">Here</a> To Visit!</span>
</center></td><td><center>
<img src="pic7.jpg" height="100" width="100" onclick="show(3)">
</center></td>
</tr>
<tr VALIGN=center>
<td><center>
<img src="pic4.jpg" height="100" width="100" onclick="show(4)"><BR><BR>
</center></td>
<td><center>
<span id="link4" style="display:none">Click <a href="here4.html">Here</a> To Visit!</span>
</center></td>
<td><center>
<img src="pic8.jpg" height="100" width="100" onclick="show(4)">
</center></td>
</tr>
</table>That will match 1 and 5 together, yo uwill just have to change the picture sources. The number in the parentheses are the same for grouped images.