• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

RollOver Image and OnClick Event

New Here ,
Sep 01, 2017 Sep 01, 2017

Copy link to clipboard

Copied

Hello.

I want to make a rollover button and when I click it to change the button's image to Image_SELECTED image.

I have 3 images for the button

Image_NORMAL

Image_MOUSEOVER

Image_SELECTED

How can I do to change the button's image with Image_SELECTED image and the button still work correctly on Mouse Rollover ?

I want to use Image Behavoirs for that purpose.

Thank You !

Views

2.6K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Expert , Sep 02, 2017 Sep 02, 2017

hi tomcat2900 ,
if you want to use behaviours
and not "external" DW technologies you can try a combo of classical swap/restore image via the "Behaviours" panel and mix it with a "Show-Hide Elements" for the "Image_SELECTED". But in this case you will need an element (a div with an image or an image) with absolute positioning matching the same position of your button (I assume its a button).

Screen Shot 2017-09-02 at 12.32.01.png

hope this can be of any help. Cheers.

Votes

Translate

Translate
Community Expert ,
Sep 01, 2017 Sep 01, 2017

Copy link to clipboard

Copied

You do not need complicated JavaScript behaviors for this.  Use pure CSS instead.

CSS Button Sprite - http://alt-web.com/

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 02, 2017 Sep 02, 2017

Copy link to clipboard

Copied

Hello Tom,

as an addition: I like to use this disjont technique, as you can it see there: DisjointTest ​

It might be of interest to you.

Hans-Günter

P.S.

It's Dreamweaver technique, you simply could use the source code adapted to your needs. The theory behind this is written in italosan's reference.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 02, 2017 Sep 02, 2017

Copy link to clipboard

Copied

But I want to use only Dreamweaver Image Behavoirs...

Please tell me how can I do that.

Thank You !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2017 Sep 02, 2017

Copy link to clipboard

Copied

tomcat2900  wrote

But I want to use only Dreamweaver Image Behavoirs...

Image behaviors alone won't do what you want.  You still need some CSS.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 02, 2017 Sep 02, 2017

Copy link to clipboard

Copied

hi tomcat2900 ,
if you want to use behaviours
and not "external" DW technologies you can try a combo of classical swap/restore image via the "Behaviours" panel and mix it with a "Show-Hide Elements" for the "Image_SELECTED". But in this case you will need an element (a div with an image or an image) with absolute positioning matching the same position of your button (I assume its a button).

Screen Shot 2017-09-02 at 12.32.01.png

hope this can be of any help. Cheers.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Sep 03, 2017 Sep 03, 2017

Copy link to clipboard

Copied

LATEST

Thank You All for your answers !

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines