【问题标题】:link images to web link将图像链接到网络链接
【发布时间】:2013-03-14 22:04:24
【问题描述】:

首先,我不是网页设计师,我对 html、css、javascript 等的了解非常有限。

我正在运行一个脚本,每次刷新页面时都会显示一个随机图像。我想知道,我如何设置一个点击链接,允许用户点击随机图像并进入另一个网页。

我使用的脚本如下。理想情况下,我希望能够单击图像,然后发送到该词的定义。

例如,当显示“expose.png”时,我希望能够点击图像并被带到http://oxforddictionaries.com/definition/english/expose?q=expose

请帮忙。

<a href="javascript:document.location.reload();"
ONMOUSEOVER="window.status='Refresh'; return true">
<img src="Graphic-design-can-[TEST].png" width="auto" height="auto"//>
</a>

</div>




<div id="outcome">

<script language="JavaScript">

function random_imglink(){
var myimages=new Array()

myimages[1]="expose.png"
myimages[2]="inform.png"
myimages[3]="explain.png"
myimages[4]="formulate.png"
myimages[5]="record.png"
myimages[6]="mediate.png"
myimages[7]="design.png"
myimages[8]="persuade.png"
myimages[9]="summarise.png"
myimages[10]="generate.png" 


var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()

</script>

【问题讨论】:

    标签: javascript image hyperlink


    【解决方案1】:

    你可以这样做...

    </div>
    
    
    
    
    <div id="outcome">
    
    <script language="JavaScript">
    
    function random_imglink(){
    var myimages=new Array()
    

    var mylink=new Array()

    myimages[1]="expose.png"
    mylink[1]="www.atrein.com"
    myimages[2]="inform.png"
    mylink[2]="www.atrein.ir"
    myimages[3]="explain.png"
    mylink[3]="www.apadana-business.com"
    myimages[4]="formulate.png"
    mylink[5]="www.google.com"
    
    
    
    var ry=Math.floor(Math.random()*myimages.length)
    if (ry==0)
    ry=1
    document.write('<a href="'+mylink[ry]+'" ><img src="'+myimages[ry]+'" border=0> </a>')
    }
    random_imglink()
    
    </script>
    

    【讨论】:

      【解决方案2】:

      你可以做类似的事情,与图像标签相同的过程,

      <a href="javascript:document.location.reload();"
      ONMOUSEOVER="window.status='Refresh'; return true">
      <img src="Graphic-design-can-[TEST].png" width="auto" height="auto"//>
      </a>
      
      </div>
      
      <div id="outcome">
      
      <script language="JavaScript">
      
      function random_imglink(){
      var myimages=new Array()
      var myurls=new Array()
      
      myimages[1]="expose.png"
      myimages[2]="inform.png"
      myimages[3]="explain.png"
      myimages[4]="formulate.png"
      myimages[5]="record.png"
      myimages[6]="mediate.png"
      myimages[7]="design.png"
      myimages[8]="persuade.png"
      myimages[9]="summarise.png"
      myimages[10]="generate.png" 
      
      myurls[1]="http://google.com"
      myurls[2]="http://stackoverflow.com"
      .....
      ....
      
      
      var ry=Math.floor(Math.random()*myimages.length)
      if (ry==0)
      ry=1
      document.write('<a href="'+myurls[ry]+'"><img src="'+myimages[ry]+'" border=0 id="'+myimages[ry]+'" onClick="'+dosomething(myimages[ry])+'") /></a>')
      }
      
      random_imglink()
      
      function dosomething(myimage)
      {
            switch(myimage)
            {
                   case 'expose.png':
                           p = document.createElement("p");
      
                           img = document.createElement("img");
                           img.id="minutesTens";
                           img.src = "1.gif";
                           p.appendChild(img);
                           break;
      
                   case 'inform.png':
                           p = document.createElement("p");
      
                           img = document.createElement("img");
                           img.id="minutesTens";
                           img.src = "2.gif";
                           p.appendChild(img);
                           break;
                    case.....
                    ..........
                    ..........
      
       }
      
      </script>
      

      这段代码的内容: 使用 document.write 函数创建的图像将包含 ID 和事件调用“onClick”。 将使用参数“ID”调用函数 onClick()。当前图像的 ID 将被传递到哪里。

      dsomething() 函数获取图像的 ID 并根据 switch case 语句设置下一个图像。 我希望现在很清楚。 希望对您有所帮助。

      【讨论】:

      • 当点击其中一张图片时,有没有办法让另一张图片出现在同一页面上?
      • 用它自己的javascript制作一个额外的元素。并在用户单击时执行与上述功能类似的操作。希望你明白我的意思...
      • 就像这个一样。在您的 document.write... 下方添加此代码 document.write('') 使用您想要的图像 url 更改源显示出来。
      • 抱歉,我不确定我是否理解。
      • 新的编辑是否正确?你能解释一下吗?这是否允许我为每个人设置不同的图像?例如,当我单击“expose.png”ID 时,就像要显示的特定图像一样。然后,当我点击“inform.png”时,我想显示不同的图像等等......
      猜你喜欢
      • 2018-04-29
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2015-06-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-03-27
      相关资源
      最近更新 更多